AnjularJS-imooc学习笔记1

第一部分 快速上手 1.版本1.3.0 2.四大核心特性 a.MVC b.模块化，一切（标签、控制器等）都从模块开始 c.指令系统directive d.双向数据绑定（展示与DOM） 3.环境搭建 a.轻量级服务器：nodeJS的http-server：将目录发布成网页，可以作为模拟数据源 b.调试：chrome+batarang或者findbug c.代码合并和混淆：grunt d.依赖管理工具：bower e.单元测试：karma（浏览器环境）+jasmine（相当于JUnit）或者protractor（专为AnjularJS定制，测试语法也是使用的jasmine） 第二部分 基本概念和用法 一、MVC 1.MVC中的controller a.ng-app相当于main函数，因此只能有一个。 b.ng-controller是控制器，通用功能通过service实现而不是继承公共的控制器。 c.controller使用注意： -不复用，一个控制器只负责一个视图 -不操作DOM，DOM操作使用directive实现 -不做数据格式化，使用标签 -不做数据过滤，使用$filter -不相互调用，应该通过事件触发调用 2.MVC中的model通过ng-model实现页面标签与后台变量的双向数据绑定，ng-bind用于后台到view的单项数据绑定。 3.MVC中的view通过directives实现。 4.Angular中的MVC是借助$scope实现的： a.$scope是树形结构，与DOM标签平行 b.$scope对象会继承父scope的属性和方法。 c.$scope位于$rootScope下（ng-app定义根rootscope） d.$scope可以传递事件（emit：向上，broadcast向下。均包含同级） 二、路由、模块、依赖注入 1.模块：一切都从模块开始 var modeluName = angular.module('name',[]);ioc的内容在[]中添加依赖。 2.路由：Angular提供路由机制ng-route $rootProvider.when('/hello',{templateUrl:'tmpl/hello.html',controller:'HelloCtrl'}).otherwise... 3.一般项目模块切分： a.controllers：控制器 b.directives：标签 c.service：服务 d.filter：过滤器 e.routeProvider：路由 4.依赖注入：定义模块时[]引入。 5.双线数据绑定： a.双向：视图和model b.ng-model是双向数据绑定，ng-bind是model->view的数据绑定，{{}}用于数据显示，要求angular.js必须加载完毕，不然会显示出来{{}}中的内容，因此一般首页使用ng-bind（angular.js一般首页index加载） c.ng-class可以接受表达式，比原有class增强 d.ng-show、ng-hide用于显示、隐藏数据，两者功能类似 e.ng-view用于显示引用页面 f.ng-animate用于控制动画 g.ng-route用于路由，但是不利于多级控制，一般使用开元的UI-ROUTE代替。 h.#锚点，用于页面内导航，是前端路由的一般方法。 PS:bootstrap是css框架，控件能力较弱，一般不用，主要使用其css定义。