安装
1.官网http://angularjs.org/下载安装
2.开源库http://www.bootcdn.cn/下载安装
Angular除了提供一些需要最新浏览器支持的功能外，同时提供以下标准功能：
- 依赖注入
- 模板
- 路由（@angular/router）
- AJAX（@angular/http）
- 表单（@angular/forms）
- 组件化CSS封装
- XSS保护
- 单元测试工具
功能丰富的好处就是你不需要额外费精力去挑选第三方的类库，然而，这也同样让你没得选择，即使你并不需要这些功能（最新发布的Angular4貌似已经意识到了这个问题）
MVC
MVC即“模型 - 视图 - 控制器”的简称，一种设计模式，MVC的从逻辑上将代码清晰地分割为三层，这样可以对每个部分进行独立开发、测试和维护。
- 模型/Model - 服务层（service）负责维护数据
- 视图/View - 展示层（diretive）负责将数据展现给用户
- 控制器/Controller - 控制层（control）负责控制Model和View之间的交互
应用场景
开发环境 <script src="angular.js"></script>
angualr应用创建基本步骤
1 <!DOCTYPE html>
2 <html lang="en" ng-app="demo">
3 <head>
4 <meta charset="UTF-8">
5 <title>demo</title>
6 <link rel="stylesheet" href="bootstrap.css">
7
8 //link标记允许当前文档和外部文档之间建立连接，但是只能在head标签里面用
9 <script src="angular.js"></script>
10 </head>
11 <body>
12 {{1+1}} {{msg}}
13 <div id="box" ng-controller="oneCtrl">
14 {{1+1}} {{msg}}
15 </div>
16 <script>
17 (function(){
18 angular.module("demo",[])
19 demo.controller("oneCtrl",function($scope){
20
21 //学习中一般这样用 当代码上线压缩后 这段代码会有问题
22
23 demo.controller("myctrl"["$scope","$http"],function (scope,http) {
24 // 开发中要用的表达式
25
26
27 $scope.msg = "hello angular!"
28 })
29 })()
30 </script>
从其他博客整理来的知识点
1.ng-app,ng-app="",ng-app="demo"三者的区别
答：ng-app有一个默认的模块。如果有多个ng-app，默认是加载第一个，而且只加载第一个。ng-app=“自定义的模块” 是一个使用了自定义的模块，该自定义的模块继承了那个初始的默认的模块，可以调用初始的默认的模块的方法第二者是第三者的特例。
2.为什么没有ng-app,也可以启动angular?
答：如果在当前的页面中包含有ng-app这个指令，angular会自动启动，如果不想在当前的页面中显示标识ng-app,我们可以代码的方式手动启动，即通过angular.bootstrap(document,["demo"])手动启动，等价于ng-app="demo";
3.angular.bootstrap(document.getElementById("box"),["demo"])的作用？
答：angular.bootstrap(启动位置,数组)，启动位置：表示管理范围，数组：表示把数组中的当成启动模块
控制器之间的继承
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>demo</title>
6 <link rel="stylesheet" href="bootstrap.css">
7 <script src="angular.js"></script>
8 </head>
9 <body>
10 {{1+1}} {{msg}}
11 <div id="box" ng-controller="oneCtrl">
12 {{1+1}} {{msg}}
13 </div>
14 <script>
15 (function(){
16 angular.module("demo",[])
17 .controller("oneCtrl",function($scope){
18 $scope.msg = "hello angular!"
19 })
20 angular.bootstrap(document,["demo"]);
21 angular.bootstrap(document.getElementById("box"),["demo"]);
22 })()
23 </script>
24 </body>
25 </html>
bootstrap插件使用官网上 http://getbootstrap.com查阅使用以后仔细学过再来做笔记
Angular控制器
控制angular应用程序的数据。
控制器是JavaScript对象，构造函数
Angular模块
模块对应执行应用的HTML元素
模块可在angular 应用中添加控制器，指令，服务等。
Angular scope（作用域）
作用域是在应用在HTNL(视图)和JS（控制器）之间
当angular创建控制器时可以将$scope对象当做参数传递
scope是一个对象，有可用方法和属性
简单的理解：$scope 局部作用域
$rootscope 全局作用域
Angular scope 事件
ng-click/dblclick 点击/双击
ng-mouseover/out
ng-keydown/up
ng-focus/blur 获取焦点
ng-submit
Angular 指令
指令 是扩展HTNL 为内置的指令来为应用添加功能 带有前缀 ng-
ng-init 初始化应用程序数据
ng-model 绑定到应用程序（比如输入的域的值）
ng-repeat 对于集合中（数组中）的每个项 克隆一次HTML元素（ 指令用于循环输出指定次数的 HTML 元素）
1 <!doctype html>
2 <html lang="en" ng-app="zidingyi">
3 <head>
4 <meta charset="utf-8">
5 <title>repeat</title>
6 <meta name="keywords" content="">
7 <meta name="description" content="">
8 <script src="angular.min.js"></script>
9 </head>
10 <body>
11 <ul ng-controller="myctrl">
12 <li ng-repeat="persen in data">
13 <!-- 循环（for in 循环） -->
14 <span>年龄:{{persen.name}}</span>
15 <span>年龄:{{persen.age}}</span>
16 <span>年龄:{{persen.score}}</span>
17 </li>
18 </ul>
19 <script>
20 var app=angular.module("zidingyi",[])
21 app.controller("myctrl",function ($scope) {
22 $scope.data=[
23 {"name":"张三","age":22,"score":98},
24 {"name":"李四","age":23,"score":70},
25 {"name":"王五","age":28,"score":90},
26 {"name":"赵六","age":31,"score":100}
27 ];
28 })
29 </script>
30 </body>
31 </html>
运行结果
