前端之家收集整理的这篇文章主要介绍了
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定义。 原文链接:https://www.f2er.com/angularjs/145934.html