Angular基础教程

x33g5p2x  于2021-10-10 转载在 Angular  
字(2.3k)|赞(0)|评价(0)|浏览(438)

Angular基础教程

https://www.runoob.com/angularjs/angularjs-tutorial.html 教程文档

基本上学完这些,你就能正常的开发项目了,注意是正常开发而不是架构

阅读本教程前,您需要了解的知识:

在开始学习 AngularJS 之前,您需要具备以下基础知识:

  • HTML
  • CSS
  • JavaScript

什么是 AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

入门案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   
</head>
<body>

<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>
 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

代码解析:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

这是AngularJS插件 ,使用AngularJS必须导入到页面中 ,我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 内元素是 AngularJS 应用程序 的"所有者"。 如果您移除了 ng-app 指令,AngularJS命令将无效

ng-model 指令把输入域的值绑定到应用程序变量 name。 这个name自动会创建到AngularJS 里无需我们手动显示创建

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。(改变input的时候同时改变ng-bind绑定的内容和{{ }}的作用一样)

以上是简单的AngularJS应用 但是实际上不会这样用的,会模块化使用

AngularJS 模块化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

</body>
</html>

语法解析:

绑定AngularJS 的作用域到myApp中 对应 html 的 ng-app="myApp"

var app = angular.module('myApp', []);

AngularJS 控制器控制应用 它的作用主要是对视图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

AngularJS 指令大全

把下面指令学完基本,AngularJS就能正常开发了

https://www.runoob.com/angularjs/angularjs-reference.html

建议把Angular-Cli 也学下我博客里有

相关文章

微信公众号

最新文章

更多