AngularJS 常虎
目录 概述 常用指令 过滤器 依赖注入 路由
AngularJS概述 AngularJS是一个动态WEB应用设计的结构框架 它能让你使用HTML作为模板语言，通过扩展HTML的语法 它能让你能更清楚、简洁的构建应用组件 其创新点在于利用了数据绑定和依赖注入 注意：它是一个框架，不是类库。 类库是一些函数的集合，能帮你实现WEB应用，起主导作用的是你的代码，由你来决定何时何地使用这些类库，如jQuery。 框架是一种特殊的、已经实现的WEB应用，你只需要对它填充相应的业务逻辑，这里框架起主导作用，由它来根据具体的应用逻辑调用你的代码，如：ExtJS
AngularJS概述 AngularJS的核心是基于对HTML标签的增强
AngularJS下载 下载地址：https://github.com/changhu2013/angularjs_demo
AngularJS - Hello World 绑定数据 起点 用{{}} 显示数据
AngularJS - Hello World angular.bootstrap 当页面加载完成之后调用bootstrap启动angular
AngularJS - MVC 告诉angular引擎他应该管理的内容 设置控制器 控制器是一个普通JS方法
AngularJS - MVC div 是视图 Hellocontroller方法是控制器 $scope.greeting是数据模型
AngularJS - 数据绑定 ng-model实现数据的双向绑定 {{}} 实现模型数据的展示
AngularJS - 常用指令 ng-app ng-controller ng-repeat ng-model ng-bind ng-change ng-click ng-app 告诉angular它应该管理页面的哪一部分 Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. ng-controller 用javascript管理的页面的区域叫控制器 ng-repeat 循环便利集合并为每一个元素拷贝模板内容 ng-model 将html组建和数据模型之间进行数据绑定 双向的数据绑定 ng-bind {{}} 进行数据绑定 ng-change 值变化事件绑定 ng-click 点击事件绑定 ng-src 为了解决动态资源地址问题
AngularJS - 指令 ng-class ng-href ng-src ng-show ng-init ng-class <ul ng-show="show"> <li ng-repeat="item in items" ng-click="selectedItem($index)" ng-class="{selected : $index == selectedItemIndex}"> <p>{{item}}</p> </li> </ul>
AngularJS - $watch 语法： 当需要侦听模型变化的时候使用$watch $watch方法返回一个函数，执行该函数则取消侦听。
AngularJS - $watch $watch 传入一个表达式和一个回调函数，当表达式发生变化的时候执行回调函数。
AngularJS - filter 语法： 过滤器实现模型数据展示时的格式化 $watch 传入一个表达式和一个回调函数，当表达式发生变化的时候执行回调函数。
AngularJS - filter 带有名字的模块 自定义过滤器： 定义模块tf并定义过滤器titleCase var tf = angular.module('tf', []); tf.filter('titleCase', function(){ return function(input){ var ws = input.split(' '); for(var i = 0; i < ws.length; i++){ ws[i] = ws[i].charAt(0).toUpperCase() + ws[i].slice(1); } return ws.join(' '); });
AngularJS - 依赖注入 $scope从哪儿来？
AngularJS - 依赖注入 控制器的另外一种写法 1 定义模块 2 调用模块的controller方法，第一个参数为控制器名称，第二个参数为一个数组，数组中第一位为依赖的对象，后面方法的参数。
AngularJS - 依赖注入 $scope $http这两个参数必须和前面两个字符串对应 错误 正确
AngularJS - $http 1 依赖注入$http对象 2 $http的调用和jQuery类似
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $http
AngularJS - $resource
AngularJS - $resource
AngularJS - $resource
AngularJS - $resource
AngularJS - $resource
AngularJS - $resource
AngularJS - 路由 1 首先引入angular.js和angular-route.js两个文件
AngularJS - 路由 1 定义模块demo8，引入ngRoute模块 2 通过config API注入$routeProvider模块，并通过$routeProvider.when方法来定义路由规则。 注意：第二条路由规则匹配参数，以：声明的参数会被提取出然后存放在$routeParams对象中。
从$routeParams中可获取当前URL中匹配的参数。 AngularJS - 路由 1 定义控制器demo8,该控制器引入了$scope $http $routeParams 三个模块 从$routeParams中可获取当前URL中匹配的参数。
AngularJS - 路由 下面是两个模板页面文件
AngularJS - 路由
AngularJS - 路由
AngularJS - 路由
AngularJS - 路由
AngularJS - 路由
AngularJS特性 -- 数据绑定
AngularJS特性 -- 数据绑定
AngularJS -- 表达式
AngularJS特性
AngularJS特性
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令 参考资料：http://www.html-js.com/article/1869
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS -- 指令
AngularJS特性
AngularJS -- 指令
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS特性-DI
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- 作用域
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch
AngularJS -- ngTouch