AngularJs入门

为什么要使用Angular Js
1.产生的核心是为了解决数据绑定的问题
2.提供了一套从前端到后端的解决方案以及自定义了一套事件标准
3 . 提倡分层面进行开发，所以 angularjs 是一套 MVC 框架
特性：
1.MVC模式 编程上讲
2.模块系统
3.指令系统
4.依赖注入
5.双向数据绑定 从数据绑定上来讲是MVVM
6.更适合做pc端项目，移动端不是很好
如何使用angularjs
A：引入
<script type="text/javascript" src="lib/angular.min.js"></script>
B：初始化angularjs
①：声明管理边界 页面中加入angularjs指令 ng-属性 要声明管理边界首先要声明ng-app="myapp指令
②：调用angular对象，管理ng-app，angularJs将所有API封装到angualr对象里面，使用angular对象做边界管理的时候，声明一个模块：angular.module()；声明一个模块的过程就是在做边界管理。
angular.module(''，[ ]); ,[ ]这个空数组是用来后面依赖注入到模块里面的内容
③：直接写喽

C:表达式的使用
都是通过{{}}去输入一些值
表达式和vue一样，都是通过双括号形式去输出值
2.基本指令：
指令：自定义属性，并且带有特定功能，ng-属性名称
①：初始化数据指令
页面上去写： ng-init="myId = '9527' " 格式：ng-init="key = value"
angular处理初始化值：将key=value ---->object,页面中通过{{}}引用
ng-init ="key=string|array|object" 都可以
在什么地方去显示数据： {{myId}}
如：userName:'hello world angular' 解析成这样的对象 所以这里也可以是数组
ng-init="userName = {rest:[1,2,'hello world angular']}
<div ng-bind="userName.rest[0]"></div>

②.ng-model $scope对象进行数据管理 对比 v-model 放到data里面 会将ng-model中输入的内容直接挂载到$scop对象上
主要作用，接收页面上面数据输入，并且能把输入的数据放到model里面去，input接收ng-model 输入的内容
输入的内容显示到页面

③.ng-bind 数据绑定：将变量的值直接绑定到html内容里面去了，获取了当前的值，直接放置到innerHTML中
<div ng-app="myapp" ng-init="user={rest:['xin','wu','yi']}">
{{user.rest[0]}}
<div ng-bind="user.rest[1]"></div>
</div>
与双括号的区别：{{}}可以将值绑定到任何属性里面包括title,src
ng-model 可以绑定，但是不提倡，作用：view-model数据改变

3.控制器
angular是编程模式上面MVC，工作特性，MVC框架
关注：
View css,image,html,js(数据绑定 都是通过{{}}或者指令来完成的)
controller 控制器
作用： 1.监听页面中的任何请求和行为
2.访问和处理数据
3.将数据传给view
静态页面，纯html
控制器：js完成，如何实现控制器
①：页面声明一个控制器 通过ng-controller指令
②：通过angular模块实例去监听控制器
如何去监听？
1.页面元素绑定事件
2.绑定以后 我们如何在控制器里面监听
引出angular对象，内置服务对象，服务指的是功能 $scope 指的就是范围，专门用来关联当前 ng-app 或者是关联ng-controller内部数据和事件方法核心对象。
<div ng-app="myapp" ng-controller="myCtr">
{{test}}
</div>
//初始化模块----初始化管理边界
var app = angular.module('myapp',[]);
//controller初始化控制器 监听我们要控制页面
//controller('当前控制器id',function(){方法和逻辑})
app.controller('myCtr',function($scope){
var jsons = 'controller';
$scope.test =jsons; //给$scope对象新挂了个属性
});
$scope 用法1：实现数据关联，只要我们在控制器里面说明scope名称，页面中直接通过{{scope名称}}
监听页面事件
1.自定义了一套事件机制 ng-事件名称 没有on
2.v-on:绑定事件="methods里面函数"，angular绑定事件ng-click="挂载在scope里面"
<div ng-app="myapp" ng-controller="myCtr">
<div>{{test[1].name}}</div>
<button id={{test[0].name}} ng-click="testApp($event)">点击测试</button>
</div>
//初始化模块----初始化管理边界
var app = angular.module('myapp',[]);
//controller初始化控制器 监听我们要控制页面
//controller('当前控制器id',function(){方法和逻辑})
app.controller('myCtr',function($scope){
var jsons =[{name:'xin'},{name:'sen'},{name:'yi'}];
$scope.test =jsons;
//1.做页面事件监听
$scope.testApp=function(event){
//与view有关联数据都关联上
var id = event.target.getAttribute("id");
console.log(id)
}
});
扩充一下子：
$timeout是angular中自定义的一个服务，功能与原生setTimeout是一样的:定时器
$timeout(function(){
jsons = 'ee';
$scope.test = jsons;
},3000)
4.model 数据模型
对上提供数据

MVC 和 MVVM有什么区别：
MVC：是一种层面上的概念，是编程时，实现view controll model 的分离
MVVM：指的是数据和视图之间的映射关系
MVVM是MVC的一种进阶（升级版），MVVM淡化了控制层，把控制层划分成 m-v，v-m 的关系映射，
mvvm----controller功能
angular其他指令
4.ng-repeat="item in 集合" vuejs对比 v-for="item in 集合" 在页面中{{item.img}}
作用： 主要是实现list数据绑定

5.angularjs 提供了一套前后端可以连接的解决方案 它封装了一套自己的ajax函数
控制器里面 function($scope,$http)
1.$http({ url, type, data, success })
2.精简写法 get，post
$http.get(url).success(function(res){
console.log(res);
});
3.$http.post(url,options)

fn相当于一个回调函数，将请求得到的数据拿回来
6.基于webpack +angular 搭建前端mvc 模式web项目结构
①：为什么进行webpack进行构建
view--->controller 通信很多 写很多 控制器文件
②：如何进行构建
a:项目目录整合
----view -----controller -----model
b:app.js 从 app.js里面调用控制器 创建控制器js文件 
c:创建数据模型js文件 model.js | db.js 
搭建整合环境：
webpack 局部 angularjs 装入 jsx-loader 加载器 （react，原生整合都可以使用）

配置文件
d:做业务实现
view:

controller:

model:

app.js(入口文件)：

webpack.config.js:

e:打包整合
组件和模块化的区别：

从设计上来看，组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块。模块可能是互相依赖的，复用难度大，而组件之间的耦合度是很低的，重用简单。