AngularJS 学习笔记 1.皮毛

时间：2015-09-05 23:39:06 阅读：291 评论：0 收藏：0 [点我收藏+]

标签：

还有几天就要去就要去新公司报道了。

新公司是要用到 AngularJs的. 虽然以前简单看过。但是没有详细了解过。

趁这几天恶补一下.

早就听说了出了2.0。且完全和 1.0 不一样.. 这让我很忧伤.

于是在学习之前查了一下

http://www.oschina.net/news/65407/is-angular-2-ready

似乎还在开发阶段..

以下初步了解.

Controller

1. 不用复用Controller.

2. 不用操作Dom，尽量使用指令来完成。

3. 不用再Controller 里格式化数据

4. 不要在在Controller里做数据过滤。 $filter

5. Controller 不要互相调用，交互通过事件，Scope。来交互.

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <div ng-app="firstApp">
 9     <div ng-controller="c1">
10         {{cao}}
11     </div>
12 </div>
13 <script type="text/javascript" src="angular.js"></script>
14 <script type="text/javascript">
15 
16     var app = angular.module("firstApp",[]);
17 
18     app.controller("c1",["$scope",function($scope){
19         $scope.cao = "caole";
20     }]);
21 
22 
23 </script>
24 </body>
25 </html>

首先建立一个模块。 firstApp.

后面那个数组是一些依赖项，angularjs官方提供了很多方法，可以加载使用.

然后这里创建了一个名字叫c1的Controller.

结果就是

caole

每一个控制器做自己的事情,比如登录啊,显示List啊之类的.

控制器也可以分层级

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <div ng-app="firstApp">
 9     <div ng-controller="c1">
10         {{cao}}
11         <div ng-controller="c2">
12             {{cao}}
13         </div>
14     </div>
15 </div>
16 <script type="text/javascript" src="angular.js"></script>
17 <script type="text/javascript">
18 
19     var app = angular.module("firstApp",[]);
20 
21     app.controller("c1",["$scope",function($scope){
22         $scope.cao = "caole";
23     }]);
24 
25     app.controller("c2",["$scope",function($scope){
26 
27     }]);
28 
29 </script>
30 </body>
31 </html>

c1 是父级。

c2 是子级

c2 的 $scope 会继承 c1 $scope

c1 继承 $rootScope

和原型链一样。会先查找自己内部。找不到向上查找.

所以结果是

caole

如果你将 c2 修改

1     app.controller("c2",["$scope",function($scope){
2         $scope.cao = "caole2";
3     }]);

那结果就是

caole

caole2

我将$scope简单的理解为上下文。和this一样。

依赖注入的简单操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div ng-app="firstApp">
    <div ng-controller="c1">
        {{cao}}
        <div ng-controller="c2">
            {{cao}}
            <div ng-controller="c3">
                {{cao}}
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">

    var app = angular.module("firstApp",[‘sceondApp‘,‘appDirctives‘]);

    app.controller("c1",["$scope",function($scope){
        $scope.cao = "caole";
    }]);

    app.controller("c2",["$scope",function($scope){
        $scope.cao = "caole1";
    }]);

    var app2 = angular.module("sceondApp",[]);
    app2.controller("c3",["$scope",function($scope){
        $scope.cao = "乱入";
    }]);

    var appDirctives = angular.module("appDirctives",[]);
    appDirctives.directive("dirctive_1",[‘$scope‘,function($scope){

    }]);

    appDirctives.directive("dirctive_2",[‘$scope‘,function($scope){

    }]);

    var appServices = angular.module("appServices",[]);
    appServices.directive("service_1",[‘$scope‘,function($scope){

    }]);

    appServices.directive("service_1",[‘$scope‘,function($scope){

    }]);

</script>
</body>
</html>

结果

caole

caole1

乱入

很简单了。按照顺序载入。

JavaScript代码也可以分很多文件来拆分。多人改动代码。

比如Controller 我分n个文件。 n个人来管理。

其实依赖注入是一种原则。你就算使用 angularjs 也可写出耦合非常高的代码。

重点还是代码的划分。按照接口编程..

路由

 1 <!DOCTYPE html>
 2 <html  ng-app="firstApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <div ng-view></div>
10     <!--<div ng-controller="c1">
11         {{cao}}
12         <div ng-controller="c2">
13             {{cao}}
14             <div ng-controller="c3">
15                 {{cao}}
16             </div>
17         </div>
18     </div>-->
19 
20 <script type="text/javascript" src="Js\angular\angular.js"></script>
21 <script type="text/javascript" src="Js\angular\angular-route.js"></script>
22 <script type="text/javascript">
23 
24     var app = angular.module("firstApp",[‘MyUIRoute‘,‘sceondApp‘]);
25 
26     app.controller("c1",["$scope",function($scope){
27         $scope.cao = "caole";
28     }]);
29 
30     app.controller("c2",["$scope",function($scope){
31         $scope.cao = "caole1";
32     }]);
33 
34     var app2 = angular.module("sceondApp",[]);
35     app2.controller("c3",["$scope",function($scope){
36         $scope.cao = "乱入";
37     }]);
38 
39     app2.controller("haha",[‘$scope‘,function($scope){
40         $scope.haha = "ha你妹";
41     }])
42 
43     app2.controller("fk",[‘$scope‘,function($scope){
44         $scope.fk = "约不约";
45     }])
46 
47 
48     var myUIRoute = angular.module(‘MyUIRoute‘, [‘ngRoute‘]);
49     myUIRoute.config(function($routeProvider){
50 
51         $routeProvider.when(‘/haha‘,{
52             templateUrl:‘tpl/haha.html‘,
53             controller:‘haha‘
54         }).when(‘/fk‘,{
55             templateUrl:‘tpl/fk.html‘,
56             controller:‘fk‘
57         }).otherwise({
58             redirectTo:‘/haha‘
59         });
60 
61     });
62 
63 </script>
64 </body>
65 </html>

模版都是

<h1>{{xxx}}</h1>

效果就是

http://localhost:63342/AngularJs/resource.html

http://localhost:63342/AngularJs/resource.html#/haha

ha你妹

http://localhost:63342/AngularJs/resource.html#/fk

约不约

首先 angular 的路由自然是不刷新页面，当然你也可以刷新页面.....

通过引入

angular-route.js

就可以引用路由服务。

一个模版，一个Controller.

如果会通过 ng-view 载入。单页应用福利啊..

不过。教程里推荐了 ui-router.

https://github.com/angular-ui/ui-router

以后再看看

双向数据绑定

<form>
    <p>
    <Label for="username">UserName : </Label>
    <input type="text" id="username" ng-model="userInfo.UserName" />
    </p>
    
    <p>
    <Label for="email">Email : </Label>
    <input type="text" id="email" ng-model="userInfo.Email" />
    </p>
    
    <p>
        <input type="checkbox" id="autoLogin" ng-model="userInfo.AutoLogin"/>
    </p>

    <p>
        <button id="submit" ng-click="loginData()">Submit</button>
        <button id="EmptyData" ng-click="EmptyData()">EmptyData</button>
    </p>
</form>

Controller & Route

    app2.controller("login",[‘$scope‘,function($scope){
        $scope.userInfo = {
            UserName : "aaa",
            Email:"a@qq.com",
            AutoLogin:true
        };

        $scope.loginData = function(){
          console.log($scope.userInfo);
        };

        $scope.EmptyData = function(){
            $scope.userInfo = {
                UserName : "",
                Email:"",
                AutoLogin:false
            };
        };
    }]);


  var myUIRoute = angular.module(‘MyUIRoute‘, [‘ngRoute‘]);
    myUIRoute.config(function($routeProvider){

        $routeProvider.when(‘/haha‘,{
            templateUrl:‘tpl/haha.html‘,
            controller:‘haha‘
        }).when(‘/fk‘,{
            templateUrl:‘tpl/fk.html‘,
            controller:‘fk‘
        }).when("/login",{
            templateUrl:"tpl/login.html",
            controller:"login"
        }) .otherwise({
            redirectTo:‘/login‘
        });
    });

双向绑定一个经典的场景

你不用再去获取标签上的元素。直接一步到位。

更改 $scope 或者标签上的值都会相互触发。

结果。

LoginData();

Object {UserName: "asdasd@qq.com", Email: "asdasd@qq.com", AutoLogin: true}

EmptyData();

Object {UserName: "", Email: "", AutoLogin: false}

还有ng-hide & ng-show....

在教程里面讲了动画这个东西. 我还没来得及看Css3的东西。

所以不是特别明白例子里的东西。

他究竟做了什么，做了多少..

暂时先略过..

指令

 1 <!-- 标签 -->
 2 <heihei></heihei>
 3 
 4 <!-- 指令JS -->
 5 var appDirctives = angular.module("appDirctives",[]);
 6     appDirctives.directive("heihei",[function(){
 7         return {
 8             restrict: ‘AEMC‘,
 9             template: ‘<div>Hi there</div>‘,
10             replace: true
11         };
12     }]);
13 
14 <!-- 注入 -->
15 var app = angular.module("firstApp",[‘appDirctives‘,‘MyUIRoute‘,‘sceondApp‘]);

结果就是.

Hi there


restrict

 1 <!-- E -->
 2 <heihei></heihei>
 3 <div class="ng-scope">Hi there</div>
 4 
 5 <!-- A -->
 6 <div heihei="shuxing"></div>
 7 <div heihei="shuxing" class="ng-scope">Hi there</div>
 8 
 9 <!-- C -->
10 <div class="heihei:shuxing"></div>
11 <div class="heihei:shuxing ng-scope" heihei="shuxing">Hi there</div>
12 
13 <!-- M -->
14 <!-- directive:heihei shuxing -->
15 <div heihei="shuxing" class="ng-scope">Hi there</div>

对应会生成对应的HTML 按照自己想用的方式去使用

transclude

 1     var appDirctives = angular.module("appDirctives",[]);
 2     appDirctives.directive("heihei",[function(){
 3         return {
 4             restrict: ‘AEMC‘,
 5             template: ‘<div><p>Hi there</p><p><label ng-transclude=""></label></p><p>in middel</p></div>‘,
 6             replace: true,
 7             transclude: true
 8         };
 9     }]);
10 
11 
12 
13 <heihei>
14     会出现在我想他出现的位置
15 </heihei>

结果。

Hi there

???????????????????λ??

in middel

我文件编码有问题。。反正会出现你在 ng-transclude 上。

replace

1 replace : false

结果。

 1 <heihei class="ng-scope">
 2 
 3 <div>
 4 
 5 　　<p>Hi there</p>
 6 
 7 　　<p><label ng-transclude="">
 8 
 9 　　<span class="ng-scope">
10 ???????????????????λ??
11 </span>
12 
13 </label>
14 
15 </p>
16 
17 <p>in middel</p>
18 
19 </div>
20 
21 </heihei>

heihei 这个标签没有被替换掉。就看你使用情况了。

接下来就是

compile。Link

编译。是编译阶段做的事情。

连接.

不过我做测试的时候，加入了一个 alert.

似乎每一个指令编译完成后才会调用 compile方法。 compile > link

compile 我暂时不知道他能有什么作用

link 就比较简单。

是用来加事件，改dom用的。

参数就已经很明显了。

scope,elem,attrs

scope 是父级别的 $scope

elem 是当前节点

attrs 是一个jqlite对象。感觉和elem差不太多.

然后就绑定事件.. 坐下改变什么的.

大概先这样.

知道了一个皮毛。接下来边学边用吧.

AngularJS 学习笔记 1.皮毛

标签：

原文地址：http://www.cnblogs.com/WebDetail/p/4760193.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行