《中级前端5.2》AngularJS 进阶——bind,{{}},Controller,$scope 变量 方法,ng-show

核心内容：1.MVC 框架的搭建； 2.ng-bind 指令的使用； 3.controller 控制器的使用； 4.在 $scope 中定义方法和变量

 

AngularJS 前端 MVC 的设计与搭建

最基本的一个MVC搭建：

 

Binding 指令实现双向数据绑定

本课时使用 ng-bind 或{{}} 指令进行双向绑定数据。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Bind和{{...}}</title>
 6     <link rel="stylesheet" href="css/foundation.min.css">
 7 </head>
 8 <body style="padding:10px;" ng-app="app">
 9     <div ng-controller="MyCtrl">
10         <input type="text" ng-model="uname">
11         <h1>{{uname}}</h1>
12         <div>{{'用户名: ' + uname}}</div>
13         <div ng-bind="'用户名' + uname"></div>
14         <div class="{{uname}}">{{uname}}</div>
15     </div>
16 </body>
17 <script type="text/javascript" src="js/angular.min.js"></script>
18 <script type="text/javascript" src="js/myctrl.js"></script>
19 </html>

 

Controllers 的使用

本课时讲解在 MVC 框架中如何使用 controller 以及 controller 的作用域。

index.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>AngularJS 进阶</title>
 6     <link rel="stylesheet" href="css/foundation.min.css">
 7 </head>
 8 <body style="padding:10px;" ng-app="app">
 9     <div ng-controller="FirstCtrl">
10         <input type="text" ng-model="msg">
11         <h1 ng-bind="msg"></h1>
12     </div>
13     <div ng-controller="SecondCtrl">
14         <input type="text" ng-model="msg">
15         <h1 ng-bind="msg"></h1>
16     </div>
17 </body>
18 <script type="text/javascript" src="js/angular.min.js"></script>
19 <script type="text/javascript" src="js/myctrl.js"></script>
20 </html>

myctrl.js:

1 angular.module('app', [])
2 .controller('FirstCtrl', function($scope) {
3     $scope.msg = "Hello Angular";
4 })
5 
6 .controller('SecondCtrl', function($scope) {
7     $scope.msg = "Hello Second";
8 })

Controller的作用域在他标识的div内部。

 

 

 

在 $scope 中变量和方法的使用

本课时讲解 $scope 的使用以及如何在 $scope 上声明变量和方法。

index.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>AngularJS 进阶</title>
 6     <link rel="stylesheet" href="css/foundation.min.css">
 7 </head>
 8 <body style="padding:10px;" ng-app="app">
 9     <div ng-controller="MyCtrl">
10         <input type="text" ng-model="user.uname">
11         <input type="text" ng-model="user.pwd">
12         <!-- <h1>{{reverse()}}</h1> -->
13         <div class="button" ng-click="login()">登录</div>
14         <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
15     </div>
16 </body>
17 <script type="text/javascript" src="js/angular.min.js"></script>
18 <script type="text/javascript" src="js/myctrl.js"></script>
19 </html>

myctrl.js:

 1 angular.module('app', [])
 2 .controller('MyCtrl', function($scope){
 3     $scope.msg = "";
 4     $scope.user = {uname:'', pwd:''};
 5     $scope.errormsg = "";
 6     $scope.reverse = function(){
 7         return $scope.msg.split("").reverse().join("");
 8     }
 9     $scope.login = function(){
10         if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
11             alert("登陆成功");
12         }else{
13             $scope.errormsg = "用户名或密码错误";
14         }
15     }
16 })

posted @ 2016-01-15 22:20  暖风叔叔  阅读(521)  评论(0)    收藏  举报