angular1.x的简单介绍 (一)

angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架.适合使用angularjs的项目有大型信息化管理系统:企业资源计划(ERP).它适合表单多,模块多的项目,hybrid app,不适合高并发的项目.

angular表达式{{}}
eg:

angular应用的创建步骤:
1.创建一个SPA宿主页面:index.html
2.在页面下面引用angular.js
3.创建项目的根的模块 angular.module("demo",[]);
4.在页面的标签上加上ng-app这个标识 ng-app="根模块名"
5.angular进入自动启动过程

控制器controller:1.是对view的抽象,包含view的静态属性和动态方法,与view是一对一的关系.

　　　　　　　　2.controller只能用来响应view事件,和view上的数据请求

　　　　　　　　3.controller里面不能有数据,controller的职责只对view进行服务,不保存数据

　　　　　　　　4.controller只能向服务请求数据,一个控制器可以对应多个服务

DI(Dependency Injection):解决模块与模块之间的调用问题.模块即一组相关的业务代码的组合.

注意:要创建一个angular项目,首先要创建一个针对项目根目录的根模块.

　　1.创建一个模块　　angular.module(name,模块的依赖关系列表(子类的列表))

　　　angular.module("root",["依赖的模块"或空]),当中括号里面为空的时候表示创建一个没有依赖关系的模块.

　　2.获取当前模块的详细信息　　angular.module("root")

　　3.模块与模块之间交互,angular采用继承的方式来解决模块之间的纵向交互.

在angularjs项目中,必须首先创建一个根模块,所有的类都应该属于某一模块,然后在根模块上创建控制器.

 

angularjs的启动过程,类似一个Windows的启动过程.

angularjs是以数据为中心,不能随便操作dom,只有在angular的自定指令中的link方法中才能使用Jquery,或操作dom.

ng-*　　angular内置的指令(标识作用),带有这样指令的元素都会引起angular内部检查(dirty checking).

ng-app:1.程序的启动指令,标记在html元素上面;

　　　　2.这个内置指令是用来标记angularjs的管理边界,其所在的标签内的所有html元素都在angular的管理范围;

　　　　3.用法:1)直接在html元素上面添加 ng-app;

　　　　　　　 2)ng-app="";

　　　　　　　 3)ng-app="模块名称"

如果在当前页面中包含ng-app这个指令,angular会自动启动new,如果不想显式的标识ng-app,我可以用代码的方式手动启动

angular,bootstrap(document,["demo"]);//ng-app="demo",

通过指定范围的方式来限定angular的管理范围　

angular.bootstrap(document.getElementById("box"),["demo"]);

注意:ng-app这个启动指令一般只能用在angular的宿主页面上,angular spa有且只有一个host页面

 

推荐一个国外框架源码下载的网站:www.bootcdn.cn