您的位置：首页 > Web前端 > AngularJS

angularjs初学笔记

2015-08-09 13:59 519 查看

前言

需求

在第一次尝试开发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

最简单的页面如下：

<!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-init="name='World'">
           Hello {{ name }}！
        </div>  
    </body>
</html>


必要步骤:

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教程 <- 特别推荐
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航