AngularJS学习（一）

╰+哭是因爲堅強的太久メ 2022-08-08 06:17 382阅读 0赞

网上找了一圈，少见学习angularJS的资料。在此记录学习过程中的体会，供大家参考：

1. JS文件下载

不知道是不是谷歌的原因，AngularJS的网站经常打不开，左找右找，最后发现用BOWER可以下载，但是过程比较复杂。

希望了解bower的同学，可以访问http://bower.io/。BOWER和MAVEN类似，只是BOWER用于管理JS依赖。

现在，为了节省大家的时间，特附上AngularJS的百度盘下载链接：

http://pan.baidu.com/s/1qWFmzqk

2. 第一个AngularJS程序

<!DOCTYPE html>
    <html  >
    <head>
        <title>Simple app</title>
        <script
                src="bower_components/angular/angular.js">
        </script>
    
    </head>
    <body>
    <div ng-app="">
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {
       { name }}</h1>
    </div>
    
    </body>
    </html>

注意，ng-app=“”一定要加上，否则ng-model（name)的绑定会失败。

3. Angular MVC

<pre name="code" class="html"><!doctype html>
    <html>
    <head>
        <script src="bower_components/angular/angular.js"></script>
    </head>
    <body ng-app="myapp">
    <div ng-controller="HelloController" >
        <h2>Welcome {
       {helloTo.title}} to the world of HBRTutorial!</h2>
    </div>
    <script>
        angular.module("myapp", [])
                .controller("HelloController", function($scope) {
                    $scope.helloTo = {};
                    $scope.helloTo.title = "AngularJS";
                });
    </script>
    </body>
    </html>

上例中，

ng-app="myapp"

告诉浏览器 HTML中有angularJS app.

View的部分是：

<div ng-controller="HelloController" >
        <h2>Welcome {
       {helloTo.title}} to the world of HBRTutorial!</h2>
    </div>

其中

ng-controller="HelloController"

告诉浏览器，控制器是

HelloController

1.  加载页面时，浏览器会创建AngularJS的global对象，然后执行controller的JS脚本。
2.  接下来，AngularJS会扫描app和view，找到view之后，会把view与对应的controller函数关联起来。
3.  最后，AngularJS执行controller的函数，把数据填入model, 渲染view。