AngularJS 入门 | Pluralsight
介绍
在本文中，我将逐步介绍使用 AngularJS 的基础知识。让我们从 AngularJS 中的基本文件结构开始。
- 应用程序.js
- 控制器.js
- 索引.html
快速说明
这里，app.js是一个 JavaScript 文件，我在其中创建了一个Angular 模块实例。controller.js Javascript 文件有一个Angular 控制器，该控制器已在app.js Angular 模块中注册，并包含业务逻辑（最终 UI 和数据库之间的编程）。index.html是我放置 html 代码并加载app.js和controller.js脚本文件的视图页面。
应用程序.js
我们先实现app.js。
var app = angular.module('myApp',[]);
angular.module是用于创建、注册和检索 Angular 模块的全局位置。模块是应用程序各个部分（例如控制器和指令）的容器。
模块
// Create a new module
var myModule = angular.module('myModule', []);
// Register a new controller
myModule.controller('myController',['$scope',function($scope){}])
// Configure existing services inside initialization blocks.
myModule.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
}]);
angular.module是 Angular 应用程序的入口点。每个应用程序只有一个模块，该模块获取 rootElement <html>或<body>标签。
我们在 app.js 文件中创建了一个名为myApp的angular.module 。
控制器.js
app.controller('myCtrl',['$scope', function($scope) {
$scope.name = 'Angular ';
}]);
在controller.js中，我们使用在app.js中初始化的angular.module（即app）注册我们的 Controller
app.controller有两个参数：控制器的名称和所需的angular 服务/依赖项。例如，我们加载了$scope服务并在函数中创建了一个实例。
$范围
Scope是 Angular 中预定义的对象，它使用$watch来监视模型的状态。重要的是要知道$scope具有层次结构，因此 scope 继承自其父 scope 并能够创建子 scope。
// parent scope
var parent = $rootScope();
// child scope
var child = parent.$new();
使用$scope（及其内置的$watch命令），我们可以绑定 html 和 js，使 html 中的更改转化为 js 中的更改，反之亦然。在我们的示例中，我们创建了一个名为$scope.name的作用域对象，并在视图（html 页面）中完成绑定。
索引.html
<html ng-app="myApp">
<head>
<title>AngularJS App</title>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="myCtrl">
<input ng-model="name" />
<p>Hello {{name}} !</p>
</body>
</html>
当index.html加载时，它会根据我们在index.html中定义的脚本将angular.js、app.js和controller.js注入到浏览器中。结果，angular.module被放置在 rootElement 处，并且myApp和MyCtrl可供index.html使用。
<html ng-app="myApp">
指令
Angular 具有指令组件，例如ngBind、ngValue、nclass等等。在本文中，我仅解释了一些ngApp和ngController指令。我将在下一个教程中讨论其他指令。
ng-应用程序
ngApp是 Angular 的预定义指令，这意味着如果没有其他指令，Angular 将默认为 ngApp。
如果ngApp未放置在rootElement中，则控制器将无法加载。出现此失败的原因是controller(myCtrl)使用ngApp("myApp")注册，这是未指定的默认选项。
ng-控制器
<body ng-controller="myCtrl">
ngController指令将控制器类绑定到视图。这是 Angular 如何支持模型-视图-控制器 (MVC)设计模式背后的原则的一个关键方面。
角度中的 MVC 组件
模型 — 模型是分配给文档对象模型（DOM）范围变量的数据，并由 API $watch使用。
视图 — 渲染并绑定到 DOM 中的值的 HTML 模板。
控制器——在这种情况下，ngController 指令指定一个控制器类，其中包含应用程序功能背后的业务逻辑。
数据绑定
<body ng-controller="myCtrl">
<input ng-model="name" />
<p>Hello {{name}} !</p>
</body>
{ {name}}作为变量来存储ngController myCtrl中的$scope.name值。
ng-模型
<input ng-model="name" />
ng-model提供了独特的双向绑定功能；它将值绑定到输入。
Angular 表达式 - {{Exp}}
表达式用于获取或打印视图中的变量值。直接指令适合插值绑定的范围值。但是函数表达式无法完成此任务。例如：
// work for
<p>{{scopeValue}}</p>
// fail for
<button ng-click="{{functionalExpressions()}}">Click me !</button>
// for directive used directly
<button ng-click="functionalExpressions()">Click me !</button>
<input ng-model="name" />
输入标签中写入的任何内容都将由范围 API $watch观察，并将在段落标签中显示$scope.name对象的值。
<p>Hello {{name}}!</p>
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~