摘要:AngularJS概念一款优秀的前端JS框架 伪静态文本展示设计的声明式语言优点为了克服HTML在构建应用上的不足 开发周期短 完成相同功能的代码量少

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-AngularJS基础知识

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

AngularJS

概念

一款优秀的前端JS框架 伪静态文本展示设计的声明式语言

优点

为了克服HTML在构建应用上的不足 开发周期短 完成相同功能的代码量少

使用场景

web开发 SPA(single web page application) 单页面应用 混合APP开发

对比

JavaScript : 刀耕火种 函数类库(JQuery): 铁犁牛耕 框架(AngularJS): 机械化种地

缺点

不适用DOM操作频繁的操作(游戏和网页编辑器等)

框架

AngularJS VueJS Backbone

历史

2009年 Misko Hevery创建,后被Google收购并用于很多Google项目 数据:17000 6 1500 3 学习版本:1.5.8

下载

npm install angular

主要内容

1.指令

1.1 系统指令

渲染指令(解释)

ng-app:定义angularjs生效的范围 ng-model:定义模型数据 ng-controller:定义控制器($scope) ng-bind:绑定文本模型 等价于:{{}} 事件指令

ng-click ng-mouseover|mouseout|mouseenter|mouseleave ng-submit ng-change: 节点指令-DOM操作

ng-checked ng-switch/ng-switch-when ng-style ng-class ng-hide/ng-show ng-href/ng-src ng-repeat ng-repeat=”user in userlist” [{},{},{}] ng-include

1.2 自定义指令

// HTML代码

// 标签指令

// class指令

// 属性指令

// 注释指令

2.服务(Service):控制器都可以使用的数据,就定义为服务

2.1 系统服务

$http(ajax) $timeout $interval

$http服务:(Promise)

$http.get(url, [config]).then(successCallback, errorCallback)

$http.post(url[,data][, config]).then(successCallback, errorCallback)

$timeout/$interval:执行结束之后会自动触发脏值检测

setTimeout/setInterval:也会执行,但是不会触发脏值检测,不能同步更新视图

2.2 自定义服务

// 1.新建模块

var app = angular.module('myApp', []);

// 2.新建服务:

// 使用service创建的服务最终只可以返回对象

app.service('ZuliaoService', function() {

// 返回一个对象

return {

username: "足疗小妹",

age: 18,

work: function() {

alert('技术棒棒的');

}

};

// 返回字符串无效

// return 'hello H511';

})

// 使用factory创建的服务可以返回字符串和对象

app.factory('ZuliaoFactory', function() {

// 返回对象

return {

username: "洗发小妹",

age: 22,

work: function() {

alert('给凡凡洗的一头懵逼');

}

};

// 返回字符串

return 'hello world';

})

3.过滤器(filter)

3.1 系统过滤器

currency:货币

number

limitTo

lowercase

uppercase

date

filter

orderBy

3.2 自定义过滤器

// 1.新建模块

var app = angular.module('myApp', []);

// 2.创建自定义的过滤器 3999=>3999.00

app.filter('formatNumber', function() {

// 返回一个函数,函数的参数是需要过滤的值

return function(i) {

// 保留两位小数点

return i.toFixed(2);

}

})

4.路由:引导用户访问指定的页面 = get+请求路径

// 1.新建模块

var app = angular.module('myApp', ['ngRoute']);

// 2.新建路由:routeProvider:路由提供者

app.config(function($routeProvider) {

// 建路由(链式调用)

$routeProvider

.when('/index', {

// 当请求/index路由的时候,template内容被写入到ng-view中

template: '

这是首页

'! }) .when('/list', { // 通过ajax从服务器获取,所以必须用localhost访问 templateUrl: 'template/list.html', // 与list页面匹配的控制器 controller: 'ListController' }) .when('/content', { templateUrl: 'template/content.html', // 与content页面匹配的控制器 controller: 'ContentController' }) .otherwise({ // 如果请求的路由都不存在,重定向到/index首页 redirectTo: '/index' }) })

常用方法

// 手动监听price和num的变化

$scope.$watch('price',function(){})

$scope.$watch('num+price',function(){})

$scope.$watch('cartlist',function(){},true) 深度监听

// 遍历数据

angular.forEach($scope.shoplist,function(value,key){})

动画效果

依赖CSS效果

表单验证

表单name名.表单元素name.validvalid invaliddirty pristrineerror.required

核心思想

MVC

Model 模型,跟页面数据 ng-model Controller 控制器 控制当前范围内的逻辑操作 ng-controller View 视图,HTML模板内容 HTML标签 模块化 MVVM model-view-viewmodel 数据的双向绑定 依赖注入

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-AngularJS基础知识

全部内容,希望文章能够帮你解决

javascript代码实例教程-AngularJS基础知识

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过