search

Home  >  Article  >  Web Front-end  >  Share detailed examples related to Angularjs

Share detailed examples related to Angularjs

零下一度
零下一度Original
2017-07-03 14:14:551105browse

I stayed at home for two days this weekend, and I continued to share Angularjs-related content during my free time at noon. Today I will mainly share the general introduction to Angularjs and the data binding part. Let’s go directly to the topic.

1. Basic concepts:
AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language for pseudo-static text display design, but it is weak when it comes to building WEB applications. So I did some work (you can also think of it as a little trick) to make the browser do what I want. Usually, we use the following technologies to solve the shortcomings of static web page technology in building dynamic applications.
2. Version

Angualrjs1.x: Currently a relatively stable version.
angularjs2.x: written based on typescript, it has changed a lot on the basis of 1.x and is biased towards mobile development. It is written in ES6 standards
Angularjs4.x latest version

The current version is 2.x It is not an upgrade based on 1. It advocates componentization, which is similar to Vue and React.

3. Core features
MVC (or MVVM) design idea:

Many people will think of Angularjs It is a front-end MVC framework. I think MVC is just a design idea. I think it can be said that there is a shadow of MVVM in it, because MVVM is upgraded on the basis of MVC and adds a two-way data binding function, but this is just my personal opinion. Please correct me, gods.

Two-way data binding:

Two-way data binding was not proposed by AngularJs. It existed very early. Microsoft’s WPF uses MVVM ideas and front-end frameworks. Knockoutjs has the concept of two-way binding of data.
Modularization and Dependency Injection

Modularization and dependency injection are the core content of AngularJs and the highlight of Angular.
Command system

The command system is also the core of Angular. The command system is divided into built-in commands and custom commands. Among them, I think the function of custom commands is very powerful and can achieve many powerful functions. Functions and details will be explained in detail when explaining the instructions.

4. Areas of expertise

1) Single Page Application (SPA)
2) CRUD program

It is possible that some gardeners may not understand single-page applications very well. To give a simple example, for example, our traditional multi-page application MPA through the Iframe framework has the disadvantage of loading multiple pages multiple times. Single-page applications are loaded or switched through Html segments. I won’t introduce too much about MPA and SPA here. You can understand them by Baidu.

AngularJs is suitable for CRUD application systems, but it is not suitable for applications with frequent page interactions or graphical pages and game systems are not suitable for this framework.

5. AngularJs application composition

Any ng application is composed of module types such as controllers, services, instructions, routes, filters, etc. Composition, let me use a diagram to represent the relationship:

6. Module
In AngularJS Module is a core existence, including many aspects, such as controller, config, service, factory, directive, constant, etc.
How to create the module:
angular.module('myApp',[]);
How to use the module:
Add ng-app where needed (on a certain HTML tag)
Benefits of using modules:
1) Keep the global namespace clean;
2) Easier to write test code;
3) Easy to reuse code between different applications.
4) Use declarations to make it easier to understand.

7. Using AngularJs in the application

1) When using Angular in the application, first reference the js library code of the angular framework in the page . 

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引用AngularJs库    -->
    <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js?1.1.11"></script>
  
</head>

　2) Add the ng-app module to the html element that applies Angular scope. If you need to add a controller, add ng-controller. This is not necessarily on the body element, it can be arbitrary. On the element, this indicates the application boundary using Angular. 

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    1、表达式绑定 -->
    <h1>{{expression}}</h1>
    <!-- 2、指令绑定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    3、ng-bind绑定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    4、ng-bind-html绑定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    5、ng-bind-template -->
    <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

　3. Add js code and define modules and controllers

<script>
    //模块定义
    // 第一个参数：应用名称，第二个参数：应用依赖模块
    var app = angular.module(&#39;myapp&#39;, [&#39;ngSanitize&#39;]);

    //    控制器定义
    //    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
    app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

</script>

From the above code snippet, you can see how to define the module and controller methods, and the meaning of each parameter is commented. You can take a look.

The source code will be shared with everyone on GitHub at that time, and everyone can download it.

I will share as much content with you today. Next time I will share with you data binding and controller-related content. Thank you all for your support, and you are welcome to correct me if there is anything wrong!

The above is the detailed content of Share detailed examples related to Angularjs. For more information, please follow other related articles on the PHP Chinese website!

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：Examples of regular verification of mobile phone number, email address, ID card, and bank cardNext article：Examples of regular verification of mobile phone number, email address, ID card, and bank card

Related articles

See more