Rumah >hujung hadapan web >tutorial js >angularJs如何搭建web项目？angularjs搭建web项目的详细介绍

angularJs如何搭建web项目？angularjs搭建web项目的详细介绍

寻∝梦asal: 2018-09-08 14:38:112030semak imbas

本篇文章主要的介绍了关于angularjs的一步一步的搭建web项目的情况，我们要想用angularjs搭建web项目就必须慢慢来，先看这篇文章吧

1.前言

angularjs作为现在大火的前端框架很是受欢迎，现在已经发布了2.0版本，我在这里介绍的是我学习1.2.X以上版本的一些成果，2.0版本LZ也在学习中，等学成归来再与大家一起交流学习。

2.简单介绍AngularJs

AngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS
和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间
的抽象级别，使构建交互式的现代Web应用变得更加简单。详见 AngularJs权威教程

下面讲的内容是针对对AngularJs有一些了解的同学，不了解的同学可以先去看下权威教程。

3.代码设计

先看下我们的项目文件目录：

3.1 index.html

index.html作为我们系统的访问门户文件，当然他是我们首先要编写的文件。

<!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>

代码解释：

ng-app表示angularjs作用的范围，可以写在html标签上，例如p，我们一般是写在html标签头上，代表整个html都受我们angularjs的作用。一般一个html只写一个ng-app就够了。（想看更多就到PHP中文网AngularJS开发手册中学习）

ui-view表示路由，代表我url上的路径对应的页面都将显示在这个p下面，p里面不能写内容，写了也是无效的。

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')
})

首先我们先定义一个模块module，module的名字myApp要与index.html中ng-app的名字保持一致，[ ] 中注入要引用的模块，例如第一个是ui-view的模块名。

然后我们开始调用config方法开始定义路由，要引用两个服务提供者$stateProvider、$urlRouterProvider，然后调用$stateProvider的state方法定义每一个路由；$urlRouterProvider.otherwise('first')代表当url上出现的地址不是路由中定义过的则跳转到first路由对应的页面。

本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci angularJs如何搭建web项目？angularjs搭建web项目的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript css html 前端框架 JS ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：AngularJS工具的使用方法是什么？AngularJS中如何使用jQuery？Artikel seterusnya：AngularJS Component是怎么工作的？angularjs component的使用实例

Artikel berkaitan

Lihat lagi