一. MVC框架(视图模型)
MVC是后台开发中表现层中的架构模式:
M --- model 模型(就是输入或传出的数据)
V --- view 视图(就是页面中的各种标签)
C --- controller 控制器(把模型和视图结合起来的控制器,
用于控制模型怎样展现在视图上)
二. angularjs框架
1. 简单介绍:angularjs是由谷歌创建的,它是自带模块的框架;
是属于前台的框架,与后台无关,简化了页面上的
DOM操作,适用增删改查的开发,不适用频繁的DOM
操作的开发,比如开发游戏.
2. MVVM框架: 是angularjs的架构思想,是在后台的MVC的基础上所衍生出来的;
M --- model 模型(就是输入或传出的数据)
V --- view 视图(就是页面中的各种标签)
VM --- viewmodel 视图模型对象
视图模型对象: 把模型和视图双向绑定在视图模型对象中,模型的改变会影响视图,
视图的改变也会影响模型,这就是双向绑定的意图
3. 依赖注入思想: 如果我们需要anguljs中的某个方法,先声明后调用该方法即可.
4. MVVM框架: 是angularjs的架构思想框架,是基于MVC基础的视图模型框架
M --- model 模型(就是输入或传出的数据)
V --- view 视图(就是页面中的各种标签)
VM --- viewmodel 视图模型对象(把视图与模型进行双向绑定,实现视图的
改变可以影响模型的改变,模型的改变也会影响视图
的改变)
四. angularjs的使用(在工程的public目录中作改变)
1. 目录的创建
在public目录中创建一个js目录,目录结构为:
--> angular.main.js(angularjs的js文件)
angular_module --> angular-route.min.js(angularjs设置路由时需要的js文件)
--> main.js (自己创建的主配置js文件,在这里来获取html文件,并
把html与各自的js通过controller关联起来)
-->home --> (home.html, home.js)
modules -->login --> (login.html, login.js)
-->reg --> (reg.html, reg.js)
在创建一个index.html页面,这是主页面的入口html文件,并在其html头部写上ng-app="mainApp",
mainApp为自己设置的主模块名称,在main.js中获取到这个模块,这样就把index.html与main.js关联
起来了.
1. 载入模块的设置(这里以home.html举例)
1. 在home.html中只需要写标签,如果有样式,也可以直接在home.html中写<style>....</style>来设置
该页面中的样式,其他头部内容和script的引入不写在这里,而是写在index.html中的.
2. home.js中使用angularjs设置home模块和自己的controller:
var homeModule = angular.module("homeModule",[]); //创建自己的模块
homeModule.controller("homeController", function ($scope,$http) //创建自己的controller
{...................home模块的js代码.................}
说明: 创建自己的controller,如果需要$scope服务,或者$http服务,或者其他服务,需要在function的括号
中传入$scope,$http等服务方法
2. main.js
var mainApp = angular.module("mainApp",["ngRoute","homeModule","loginModule","regModule"]);
mainApp.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/reg",{templateUrl:"js/modules/reg/reg.html",controller:"regController"});
$routeProvider.when("/login",{templateUrl:"js/modules/login/login.html",controller:"loginController"});
$routeProvider.when("/home",{templateUrl:"js/modules/home/home.html",controller:"homeController"});
$routeProvider.otherwise({
redirectTo:"/reg"
})
}]);
说明: 1. var mainApp = angular.module("mainApp",["ngRoute","homeModule","loginModule","regModule"]);
"ngRoute" 设置路由时需要的服务
"homeModule" home.js模块的获取(其他模块同理)
mainApp.config(["$routeProvider", function ($routeProvider){....}
-----------------配置路由,并声明$routeProvider
$routeProvider.when("/reg",{templateUrl:"js/modules/reg/reg.html",controller:"regController"});
--------------通过when为访问reg.html设置别名为"/reg",方便其他地方的使用,
--------------通过json对象把reg.html与regController关联起来.
$routeProvider.otherwise({ redirectTo:"/reg" })
--------------表示设置启动服务器时,访问index.html页面时首次载入ng-view中的内容为"/reg"
--------------所代表的reg.html中的内容.
3. index.html
1. 在html的头部定义ng-app="mainApp",mainApp是自己设置的主模块名称
<html lang="en" ng-app="mainApp">
2. 在head中引入angular.min.js,angular-route.min.js,main.js文件,
以及所有模块的js文件:
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="css/bootstrap.min.css" rel="stylesheet"> //bootstrap框架的css
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script> //兼容IE
<![endif]-->
<script src="js/angular_module/angular.min.js"></script>
<script src="js/angular_module/angular-route.min.js"></script>
<script src="js/angular_module/main.js"></script>
<script src="js/modules/home/home.js"></script>
<script src="js/modules/reg/reg.js"></script>
<script src="js/modules/login/login.js"></script>
</head>
3. 在body中定义一个div,用来载入其他模块加载进来的内容
<div ng-view></div>
4. 如果需要引入其他框架的js文件,可在底部引入
</body>
<script src="js/jquery-1.11.3.min.js"></script> //jquery的js
<script src="js/bootstrap.min.js"></script> //bootstrap的js
</html>
五. angularjs中的controller的是有作用域的
1. 只有div标签的controller有继承的功能,而其他的如p元素就不会有继承的功能
2. $scope所定义的对象是一个地址,如果某处改变了对象中的属性的值,那么其他引
用了该对象的值也会跟着改变: 在controller1中声明student,controller2
继承了controller1中的student.
controller1中的内容:
$scope.student = {name: "zhangsan"}
<input type="text" ng-model="student">
controller2中的内容,controller2被嵌套在controller1中:
<input type="text" ng-model="student">
说明: 1. 上面的controller1的输入框使用ng-model双向绑定了这个input和student,那么当input中的
值改变时,那么controller1中的$scope.student这个对象的地址中的值就会发生改变;所以controller2
的input中的值发生改变;
2. 当controller2的input中的值发生改变时,controller1的input中的值也跟着改变了,但按理说
父级可以影响子级,但子级不能影响父级的值?
原因在于: student是一个对象,所以student存的就是一个地址,name就是student这个地址中的
内容,controller1和controller2中的student指向的都是同一个地址,所以不管在何处改变这个
地址中的值,name在被引用到的地方都会跟着改变.
六. angularjs的属性与方法(ng开头的是angularjs的内部指令)
1. $scope: 是angularjs的一个服务,用它来定义一个属性或者方法,
所定义的属性或方法在对应的controller中范围是全局的.
所有的controller中所定义的$scope都在$rootscope
(其范围是整个js)之下,
2. $http: 是用来发送请求的,相当于jQuery中的ajax方法,但是它
只有get和post请求
3. ng-model: 用于双向绑定视图和模型,视图或模型任意一个改变,
另一个就会相应的改变
4. {{name}}: 双花括号是单向绑定的,用于获取$scope所定义的一个属性的值:
$scope.name = "张三", 那么花括号中的内容就会
是"张三",并且双花括号中的内容只能通过$scope.name
的值改变才会改变,所以双花括号是单向绑定视图;
使用双花括号可以直接获取到$scope所定义的所有属性或方法
5. ng-repeat: 循环取出一个数组(注意是数组而不是一个数字)中的值
例如: 循环设置li标签,li标签中的内容为数组中的对应的值的写法如下:
<li ng-repeat="stu in student">{{stu_id}}</li>
说明: student是$scope定义好的,当我们在标签中需要用到$scope定义
的属性或方法时,如果是写在指令内,就不需要$scope标识否则.
6. filter: 过滤器(每一个竖线就是一个过滤器)
{{ money | currency: "$"}}
表示把money这个值使用货币的形式展示出来,并在money前面加一个$符号
$scope.date = new Date();
{{ mydate | date:"yyyy-mm-dd HH:mm:ss"}}
表示把mydate这个值使用日期的形式展示出来,并且这里日期的形式自己也可以
定义,还可以是这样的形式: "yyyy/mm/dd HH:mm:ss";
{{ ary | filter: 4 }}
表示获取到ary中值中包含"4"的值
7. 在select中设置 ng-model="searchtext", 当我们选中某个option时,
searchtext = 被选中的option的value值
8. ng-style: 设置标签的样式
1. <p ng-style="{color: red}">
2. color 的值也可以是$scope所定义的属性的值:
$scope.isRed ="red";
<p ng-style="{color: isRed}">
这样也设置了p元素的color为red
9. ng-class: 动态为标签添加名称为redClass的类
<p ng-class="{redClass: true}" ></p>
true, 设置p元素class= "redClass"
false,取消p元素class="redClass"的属性
10. ng-click: 设置点击事件
<input type="button" ng-click="init()">
11. ng-show: 设置标签满足某个条件时就显示
<p ng-show="curpage<=0"><p>
表示当curpage<=0时就显示这个p元素
12. ng-hide: 设置标签满足某个条件时就隐藏
<p ng-hide="curpage<=0"><p>
表示当curpage<=0时就隐藏这个p元素
13. <a href="#/reg"></a>
在a标签的href的值中加一个#号,在点击这个a标签时就不会跳转整个页面,
而是在使局部的<div ng-view></div>中的内容进行刷新.
14. $location.path("/reg");
表示刷新<div ng-view></div>中的内容为reg.html页面重的内容
七. 自定义服务
var mainApp = angular.module("mainApp",[]);
mainApp.factory("myservice",[function(){
return function(){
console.log("我自己定义的服务");
}
}]);
说明: factory 是angularjs自定义服务时的关键字;
myservice 是自己定义的服务的名称
[] 需要引入其他模块时,写在中括号里
1. 自定义服务时,使用return 返回回来一个函数,这个函数就是我们自定义的服务的
实现.
2. 直接声明,并调用就可以使用这个服务了,注意声明时不需要$符号,因为只有
angularjs的内部的原生函数才使用$符号
mainApp.controller("mycontroller",function($scope,myservice){
myservice(); //输出结果为"我自己定义的服务"
})
八. 自定义过滤器
mainApp.filter("oddlist",function(){
return function(参数){
........这个过滤器的实现..............
}
})
