一. angularjs概述
- angularjs诞生于2009年，由Misko Hevery等人创建，后为Google所收购，所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作，适用于以数据的CRUD操作为主的SPA应用
二. AngularJS与Jquery的区别
jq : 找元素 操作元素
ng : 关注 业务数据
ng ：其实就是进一步封装了JQ,jQlite
-
angularMVC模式的写法
<body ng-app="myModule">
<div ng-controller="myControl">{{name}}</div>
-
angular.module("myModule",["ng"]).controller("myControl",function($scope){
$scope.name = "gg";
})
-
ng-app 启动ng应用程序
ng-init 定义模型变量
ng-bind 用来显示数据，跟{{}}作用一样
ng-controller 创建控制器对象ng-repeat: 根据数据内容重复创建某个元素，这个属性在哪个标签中，就重复谁
ng-if 判断,如果成立显示元素，不成立就消失在DOM树中
三. Angularjs的四大特性
1）使用MVC设计模式
2）双向数据绑定
3）依赖注入
4）采用模块化设计
四. Angularjs的使用
引入angular.js文件
-
写Angular表达式
{{表达式}}
ng会计算表达式的值，输出在当前位置
-
ng模块提供的指令(directive)组件
- ngApp:启动一个Angular应用--只有Angular应用中的表达式才会被Angular执行
用法： <ANY ng-app>
注意： angular应用范围仅限于声明他的元素范围，且默认情况下一个HTML中不允许声明多个ngapp
- ng-Init：声明模型变量
用法：<ANY ng-init="变量名=值；变量名=值">
注意：
ngInit声明变量不能声明var关键字,声明的变量可以在ng表达式中输出 只要在ngapp中声明的变量在哪里都可以使用
3) ngBind:计算一个表达式的值，输出为当前元素的innerHTML
用法：<ANY ng-bind="表达式"> 或<ANY class="ng-bind:表达式;">
说明：ngBind指令作用于{{}}表达式基本类似，只是可以防止用户在一瞬间看到{{}}.
4）ng-Controller: 调用Controller创建函数，实例化一个控制器对象
5）ngRepeat:用于在view实现循环输出
<ANY ng-repeat="变量名 in 集合对象">{{变量名}}</ANY>
含义：
对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素
6）ng-If:用于在view中实现判断输出，为false就不输出
若布尔表达式为true,则输出当前元素，否则当前元素再DOM树不存在
-
测试ng表达式可以执行哪些运算
算术运算 +-*/ % 都可以，唯独不能自增和子减 比较运算 <> 逻辑运算 && || ! 三目运算 ?: 调用字符串对象的成员方法 使用直接量表示法创建对象 创建数组 使用new关键字创建对象 调用ES全局函数 parseInt() parseIntFloat()...
六. ng中声明模型数据的方式
1. 使用ng-init指令来声明Model数据
<ANY ng-init="变量名=值;">
说明：此方式将modal声明在view中，严重违法了MVC模型的分工，不推荐使用
2. 使用Controller对象创建modal数据--符合MVC模型分工
新版本的ng中创建Model的语法
ngApp -> Module -> Controller -> Modal
七. Angular四大特性之一---MVC
1. 声明一个ng的应用程序 ngApp
<html ng-app></html>
2. 创建一个自定义的模块：angular.module("模块名",[依赖列表])
angular.module.("模块名",["ng"])
3. 在应用中注册自定义模块 ng-app="模块名"
<html ng-app="myModule"></html>
4. 在模块中声明Controller
angular.module.("模块名",["ng"]).controller("myContro",function(){
});
5. 在view中指定Controller对象的作用范围-调用控制器创建函数
<div ng-controller="myContro">
{{name}}
</div>
6. 在Controller中声明Modal数据
angular.module.("模块名",["ng"]).controller("myContro",function($scope){
#$scope.name = "蓝科教育";
});