简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to build a web project with angularJs? Detailed introduction to building web projects with angularjs

How to build a web project with angularJs? Detailed introduction to building web projects with angularjs

寻∝梦
寻∝梦Original
2018-09-08 14:38:111987browse

This article mainly introduces the step-by-step construction of web projects about angularjs. If we want to use angularjs to build web projects, we must take our time. Let’s read this article first

1. Foreword

angularjs is very popular as a popular front-end framework, and now it has Version 2.0 has been released. What I introduce here are some of the results of my study of versions 1.2.

2. Briefly introduce AngularJs

The official documentation of AngularJS introduces it like this. Completely written using JavaScript client-side technology. Works with other time-honored Web technologies (HTML, CSS, and JavaScript) to make Web application development easier and faster than ever.

AngularJS is mainly used to build single-page web applications. It makes building interactive, modern web applications easier by increasing the level of abstraction between developers and common web application development tasks. For details, see AngularJs Authoritative Tutorial

The following content is for students who have some understanding of AngularJs. Students who do not understand can first read the authoritative tutorial.

3. Code design

     

Let’s first look at our project file directory:

     

3.1 index.html

index.html is the access portal file of our system. Of course, it is the first thing we need Documents written. 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<p>
    <p>
        <p ng-include="&#39;views/common/menu.html&#39;"></p>
        <p ui-view></p>
    </p>
</p>
<script src="libs/angular.js"></script>
<script src="libs/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="module/first/firstController.js"></script>
<script src="module/second/secondController.js"></script>
</body>
</html>

Code explanation:

ng-app represents the scope of angularjs, which can be written on the html tag. For example, p, we usually write it on the head of the html tag, which means that the entire html is affected by our angularjs. Generally, it is enough to write only one ng-app for one HTML.

(If you want to see more, go to the PHP Chinese website AngularJS Development Manual to learn) ui-view represents routing, which means that the pages corresponding to the path on my url will be displayed. You cannot write content under this p, and it will be invalid if you write it.


## 3.2 app.js

var app = angular.module('myApp',
    [
        'ui.router',
        'secondModule',
        'firstModule'
    ]);

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('first', {
            url: '/first',
            templateUrl: 'views/first/first.html',
            controller: 'firstController'
        })
        .state('second', {
            url: '/second',
            templateUrl: 'views/second/second.html',
            controller: 'secondController'
        })

    $urlRouterProvider.otherwise('first')
})
First we define a module module. The name of the module, myApp, must be consistent with the name of ng-app in index.html. Inject the module to be referenced into [ ]. For example, the first one is ui. -View module name.

##            

Then we start to call the config method to start defining the route. We need to reference the two service providers $stateProvider and $urlRouterProvider, and then call the state method of $stateProvider to define each A route; $urlRouterProvider.otherwise('first') means that when the address appearing on the url is not defined in the route, it will jump to the page corresponding to the first route.

This article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual

to learn). If you have any questions, you can leave a message below. Ask questions.

The above is the detailed content of How to build a web project with angularJs? Detailed introduction to building web projects with angularjs. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript css html 前端框架 JS ui
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：How to use AngularJS tools? How to use jQuery in AngularJS?Next article：How to use AngularJS tools? How to use jQuery in AngularJS?

Related articles

See more