AngularJS学习（一）

最新推荐文章于 2025-02-20 22:56:07 发布

Paul_Huang_2011

最新推荐文章于 2025-02-20 22:56:07 发布

阅读量679

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： AngularJS

本文链接：https://blog.youkuaiyun.com/hbr2014/article/details/45568255

Web前端专栏收录该内容

20 篇文章

订阅专栏

本文分享了AngularJS的学习体验，包括解决资源下载难题、构建首个应用实例及深入理解AngularMVC架构的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上找了一圈，少见学习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

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