Angular基础---->AngularJS的使用(一)
2023-09-27 14:20:11 时间
AngularJS主要用于构建单页面的Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。今天，我们就开始Angular环境的搭建和第一个实例的使用。
AngularJS的学习一
一、 AngularJS的环境搭建，下载angularJS： https://angularjs.org/。直接解压就行。
二、 创建一个html文件，记为angular1.html
<html ng-app='hello'> <head> <script src="angular/angular.min.js"></script> <script src="js/controller.js"></script> </head> <body> <div ng-controller='HelloController'> <input type='text' ng-model='greeting.text' placeholder='World' id="name"> <p>{{greeting.text}}, World</p> </div> <Button onClick="test()">Button</Button> </body> </html>
三、 js文件controller.js内容如下：
// angular1.html var helloModule = angular.module('hello', []); helloModule.controller('HelloController', function($scope) { $scope.greeting = {text: 'Hello'}; }); function test() { document.getElementById("name").value = "Linux"; }
在AngularJS中，模块是定义应用的最主要方式。模板包含了主要的应用代码，一个应用可以包含多个模块，每一个模块都包含了定义了具体功能的代码。使用模块能给我们带来许多好处：
- 保持全局命名空间的清洁
- 易于在不同应用间复用代码
- 使应用能够以任意顺序加载代码的各个部分
- 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能
AngularJS启动并生成视图时，会根据ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。$scope对象就是一个变通的Javascript对象，我们可以在其上随意修改或添加属性。
$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。
四、 在浏览器访问angular.html:
从上述可以看出，当点击按钮时，input的值发生了变化，但是<p>之间的值没有相应的发生变化。
友情链接
- Angular的学习二： Angular基础---->AngularJS的使用(二)