神奇的angularJS——简单的angular例子_angularjs简单案例包-CSDN博客

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl">
<input type="text" ng-model="name"/>
<p> {{name}}</p>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl">
<input type="text" ng-model="name"/>
<p> {{name}}</p>
</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

学习angularJS一段时间了，也将angular成功的引入了两个项目，今天，我就将我使用angular这半年的经验，通过博客慢慢的记录下。

一、什么是angular?

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。

很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。

AngularJS 填上了这条鸿沟。

而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。

同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。

它就这么好用。听着挺厉害？是挺厉害的。通过这个七步系列，我们会带着你开始用AngularJS写厉害的应用——不管你之前有没有接触过。跟着我们，我们会教你成为一个专家级的AngularJS开发者。

不过首先我们得搞清楚：什么时候该用AngularJS？

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。

以上来此互联网

二、搭建angular环境

执行

npm

npm install angular  --save

bower

bower install angular   --save

什么？不知道npm,bower是什么？看看我以前的一篇博客吧！

当然你直接下载也行

直接下载地址

然后

在你的html文件中引用

<scriptsrc="/node_modules/angular/angular.js"> </script>

或者

<scriptsrc="/bower_components/angular/angular.js"> </script>

三、我们开始编写一个简单的angularAPP吧

首先

新建一个html文件

index.html

在src目录下简历两个javascript文件 app.js controller.js

如图

在index引入

[html] view plain copy

print ?

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>

打开app.js写入

[javascript] view plain copy

print ?

var app = angular.module('Hello', []); //新建一个app模块叫hello ,[]后面的数组为引入的其他模块名，我们没有其他模块，为空数组

var app = angular.module('Hello', []);  //新建一个app模块 叫hello ,[]后面的数组为引入的其他模块名，我们没有其他模块，为空数组

打开controller.js写入

[javascript] view plain copy

print ?

app.controller('helloCtrl', function ($scope) {
$scope.name = "菲尔";
});

app.controller('helloCtrl', function ($scope) {
    $scope.name = "菲尔";
});

打开index.html 改变内容为

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl">
<input type="text" ng-model="name"/>
<p> {{name}}</p>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl">    <!--ng-app 指向你的app名  ng-controller指向你的controller名-->
<input type="text" ng-model="name"/>                    <!--ng-model定义或指向一个$scope变量，-->
<p> {{name}}</p>                                         <!--与{{name}}ng-model中 name绑定，ng-model的值的取代{{name}}-->
</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

然后用浏览器打开这个文件