angularjs初学笔记

妖狐艹你老母 2022-08-03 13:55 160阅读 0赞

## 前言 ##

### 需求 ###

在第一次尝试开发WEB应用的时候，由于缺乏经验，同时任务时间紧迫，边学习边开发，错过了angularjs这样一个优秀的MVC前端框架。  
(当时甚至还不懂MVC事神马=.=)

后来第一次接触javascript, jquery学会了基本的javascript语法，并解除了jquery-modile, easyui等等优秀的框架，  
大大减轻了前端开发的痛苦，但是无论使用什么框架，本质的对DOM的直接操作是避免不了的。于是出现了这样的情况：

*  1、开发时美工没有就位，因此我苦逼的即写后台，前端HTML, CSS, JS全由我一人承包。。。好不容易做出个模型来，美工过来了(尼玛=.=)  
    美工开发了一套界面，于是原来的`<ul>`列表变成了`<table>`; `<input>`变成了`<div>`。。。。等等  
    由于JS直接和DOM绑定了，因此界面DOM一变，脚本也得跟着改，又写循环脚本甚至得重写。十分麻烦。
 *  2、很多页面的输入组件并没有很好的模块化，导致当很多页面都出现同样功能时候，这些代码得复制好几遍，修改的时候也得在好几个地方修改。有时候一不小心  
    忘记修改了某个地方就呵呵了。。。。

由上可以看出，即使是前端，逻辑与界面的解耦已经十分必要了。angularjs框架正好满足了这些需要。同时它的一些数据绑定特性也能帮助开发者减少很大一部分DOM和数据处理的代码。

为了便于实践，我打算开一个SpringMVC项目，实际做一个WEB应用出来。可能并不是一个有实际意义的网站，但是尽量能把我认为常用的angularjs特性展示出来。

项目地址：[augularjsPractice][].边学习边尝试开发。

这篇日志也会随时更新，或者开辟新的专题博文。

### angularjs的特点 ###

*  将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
 *  Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。
 *  双向数据绑定.

## 入门 ##

### 在WEB中引入AngularJs ###

最简单的页面如下：

必要步骤:

*  1、标注AngularJs处理的区域，加上`ng-app`
 *  2、引入angularjs包`http://code.angularjs.org/angular-1.0.1.min.js`

页面处理流程：

*  1、载入HTML，JS
 *  2、js脚本寻找到`ng-app`便签，启动AngularJs进行编译与处理。

### 数据绑定特性 ###

AngularJs的数据绑定特性， 减少了大量DOM与数据源的处理代码，十分方便。DOM和数据源(scope)中任意一方数据改变，均可以使另一方跟着变化。

#### 方法1：`ng-model + \{\{}}` ####

<!DOCTYPE HTML>
    <html>
        <head>
            <title> 测试页 </title>
            <meta charset="utf-8">
            <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="">
                <p>请输入任意值：<input type="text" ng-model="name"></p>
                <p>你输入的为： \{\{name}}</p>
            </div>
        </body>
    </html>

#### 方法2：`ng-model + ng-bind` ####

### ajax数据源与view的绑定 ###

使用$http对象进行

$http({  
            method: 'GET',  
            url: '/web/test/api/getUser'})
            .success(function(data, status, headers, config) { 
                $scope.valueViaHttp = data.map.user[0];
            })
            .error(function(data, status, headers, config) { 
                console.log('ajax $http error');
            });

效果与方法1相同，但是后者是渲染过后呈现，免去了源代码被看到的风险。

<!DOCTYPE HTML>
    <html>
        <head>
            <title> 测试页 </title>
            <meta charset="utf-8">
            <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="">
               <p>请输入一个名字：<input type="text" ng-model="name"></p>
               <p>Hello <span ng-bind="name"></span></p>
            </div>
        </body>
    </html>

### 控制器 ###

在div中使用`ng-controller`，在js中声明一个同名的function作为controller的控制代码（声明，函数等）。

*  每声明一个controller, 则自动声明一个scope（域），如果没有特殊声明，则与上一级scope相同。
 *  controller中寻找任何属性时候，如果在当前scope中找不到，则会去上一级scope寻找，一直到rootScope为止。其中rootScope对应ng-app这一级的DOM。

例如：

<!DOCTYPE HTML>
    <html>
    <head>
        <title> 测试页 </title>
        <meta charset="utf-8">
        <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
    </head>
    <body>
    
      <div ng-app="" ng-controller="MyController">
          Your name:
            <input type="text" ng-model="username">
            <button ng-click="sayHello()">打招呼</button>
          <hr>
          \{\{greeting}}
        </div>
    
    </body>
    </html>

//新版的angularjs已经不允许在根下直接注入controller.因此应该对注入方式进行修改
    function MyController($scope) { 
      $scope.username = 'World';
      $scope.sayHello = function() { 
        $scope.greeting= 'Hello ' + $scope.username + '!';
      };
    }

修改如下

<html>
    <head>
    <title>AngularJs</title>
    <script th:include="layout/common::common-header" th:remove="tag"></script>
    <script src="web/index.js" th:src="@{/resources/web/index.js}"></script>
    
    
    </head>
    <body ng-app="indexApp">
    
        <div ng-controller="IndexController">
            <button ng-click="sayHello()">打招呼</button>
            <hr></hr>
            \{\{user}}
        </div>
    
    </body>
    
    
    
    </html>

var indexApp = angular.module('indexApp', []);
    indexApp.controller('IndexController',function($scope) { 
        $scope.user="Angular";
        $scope.sayHello=function(){ 
            alert('Hello');
        };
    });

以上是AngularJs最基本的建立与使用，进阶用法待项目实践后补充。

## 学习参考 ##

[AngularJs中文网][AngularJs]

[AngularJs实战][AngularJs 1]

[AngularJs中文社区][AngularJs 2]

[汇智网自学教程][Link 1]

[AngularJs教程][AngularJs 3] <- 特别推荐

[augularjsPractice]: https://github.com/WengShengyuan/angularjsPractice
[AngularJs]: http://www.apjs.net/
[AngularJs 1]: http://www.imooc.com/learn/156
[AngularJs 2]: http://angularjs.cn/T008
[Link 1]: http://www.hubwiz.com/coursecenter
[AngularJs 3]: http://www.yiibai.com/angularjs/