search

Home  >  Article  >  Web Front-end  >  Introduction to the basics of AngularJS

Introduction to the basics of AngularJS

零到壹度
零到壹度Original
2018-04-21 10:37:562036browse

The content of this article is about the basic introduction to angularjs. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Key points:

Front-end JS framework: It encapsulates the use of JS to develop front-end repetitive functions, extends HTML, and is mainly used for page operation and display.

Core: MVC, modularization, two-way data binding, dependency injection, semantic tags, expressions, etc. [Recommended related video tutorials: angularjs video tutorial]

Two-way data binding

Introducing related js files

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--匿名应用模块-->
       <p ng-app="">
           <input ng-model="username" name="username"/>
           <input ng-model="username"/>
           <p>{{username}}</p>
           <p ng-bind="username"></p>
       </p>
    </body>
</html>


##ng-app=””Anonymous application module, generally write a name to facilitate subsequent initialization

ng-model: Automatically bind the value of the

form element to the Angularjs internal variable.

ng-bind: The function is equivalent to expression, but the usage is different. Generally used to bind non-form elements and display variables.

The difference between ng-bind and {{}}: the former will replace all the contents of the tag's sub-tags with the contents of the variable, while the latter just displays the contents of the variable at the current position.

Based on modularized MVC (MVVM)

View: mainly refers to HTML static page data tags, mainly used for display.

Model: Mainly only fills in some data of the view and logical processing. For example, json, variable

control: some js code, write logic. Mainly to get the model, populate the view, get data from the view, and populate the model.

Conversion between m and vm:

For example, variables: 

var username=”XiaoQi”;
$scope.username=username;

The variables of vm are actually bound to the properties in the global variable $scope.

On the page: {{username}}

Note: $scope cannot be added to Angularjs variables on the page.

If the variable is changed by internal js such as timer, then by default Angularjs cannot implement two-way data binding display, and $.digest needs to be used to force notification (refresh)

Example of initializing content when the page is opened: 

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--<p ng-app="myApp" ng-controller="myCtrl"  ng-init="username=&#39;Jack&#39;">-->
       
       <p ng-app="myApp" ng-controller="myCtrl">
           
           <input ng-model="username"/>
           <p>{{username}}</p>
       </p>
       
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           //参数1：应用模块的名字
           //参数2：使用扩展模块，这里没有
           var myApp=angular.module("myApp",[]);
           //初始化控制器：认为控制器绑定了一堆js
           //参数1：控制器的名字
           //参数2：js函数
           myApp.controller("myCtrl",["$scope",function ($scope) {
              //初始化变量
              $scope.username="XiaoQi";
              //可以写任何的js
           }]);
           
       </script>
    </body>
</html>


##Note:

If you define named application modules and controllers, you must use js initialize it!

Dependency Injection DI



##Button Event Binding

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="username"/>
           <input type="button" value="清空数据1" ng-click="clearMsg()"/>
           <input type="button" value="清空数据2" ng-click="username=&#39;&#39;"/>
           <p>Hello {{username}}</p>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           var myApp=angular.module("myApp",[]);
           //初始化控制器
           myApp.controller("myCtrl",["$scope",function($scope){
              //初始化一个angularjs的事件
              $scope.clearMsg=function(){
                  //清空数据
                  $scope.username="";
              };
           }]);
       </script>
    </body>
</html>
## Repeat traversal


 

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <table border="1">
              <tr>
                  <th>序号</th>
                  <th>商品编号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
              </tr>
              <tr ng-repeat="product in  products">
                  <td>{{$index+1}}</td>
                  <td>{{product.id}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
              </tr>
           </table>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[])
           .controller("myCtrl",["$scope",function($scope){
              //json数组
              $scope.products=[
                  {"id":1001,"name":"电视机","price":998},
                  {"id":1002,"name":"洗衣机","price":988898}
              ];
           }])
        </script>
    </body>
</html>
product: Just write it, the temporary angularjs object during each traversal, here refers to each json object.

Routing mechanism


Before: include contains pages, which only reuse pages, but the reused pages are also refreshed as a whole.

Through angularjs routing, partial refresh can be achieved, and repeated head and tail can be realized without refreshing. And multi-view single page effect.

Underlying implementation: realized through # (anchor) in html.

Official example:

Writing: url # Sub-path (to be displayed in the middle)
Introduce the routing module: 

<!--引入路由模块-->
       <script type="text/javascript"  src="../js/angular-route.min.js"  ></script>
##
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
       <!--引入路由模块-->
       <script type="text/javascript" src="../js/angular-route.min.js" ></script>
    </head>
    <body>
       <p ng-app="myApp">
           <p>===========我是头<br />
              <a href="#/">首页</a>
              <a href="#/computer">电脑分类</a>
              <a href="#/money">财务管理</a>
           </p>
           <!--路由中的包含的页面的显示，只能有一个元素-->
           <p ng-view></p>
           
           <p>==========我是脚</p>
           
       </p>
    
    
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[&#39;ngRoute&#39;])
           //angularjs的配置，在配置中配置路由内容
           .config([&#39;$routeProvider&#39;, function($routeProvider){
                $routeProvider
                //template中支持html标签
                   .when(&#39;/&#39;,{template:&#39;这是<h1>首页页面</h1>&#39;})
                   //.when(&#39;/computer&#39;,{template:&#39;这是电脑分类页面&#39;})
                   .when(&#39;/computer&#39;,{templateUrl:&#39;computer.html&#39;})
                   .when(&#39;/money&#39;,{template:&#39;这是财务页面&#39;})
                   //如果都匹配不上，则跳转到一个页面
                   .otherwise({redirectTo:&#39;/&#39;});
           }]);
       </script>
    </body>
</html>
ng-view: used to display the content of routing resultswhen: the result of judgment statement

template:html, supports html tags

templateUrl: Support loading additional pages

Related recommendations:

Download all versions of AngularJS

AngularJS learning summary

The difference between angularjs and angular4. Why use angular4

angular introductory tutorial

The above is the detailed content of Introduction to the basics of AngularJS. For more information, please follow other related articles on the PHP Chinese website!

mvc json html 封装 include 全局变量 JS 对象 事件
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js code to implement calculatorNext article：js code to implement calculator

Related articles

See more