1.前言" >1.前言

3.代码设计" >3.代码设计

3.1 index.html" >3.1 index.html

首页

web前端

js教程

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

寻∝梦

Sep 08, 2018 pm 02:38 PM

angularjs web项目

本篇文章主要的介绍了关于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使用手册中学习），有问题的可以在下方留言提问。

以上是angularJs如何搭建web项目？angularjs搭建web项目的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7667

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

eclipse的项目存储位置 May 05, 2024 pm 07:36 PM

Eclipse项目的存储位置取决于项目类型和工作区设置。Java项目：存储在工作区内的项目文件夹中。Web项目：存储在工作区内的项目文件夹内，分为多个子文件夹。其他项目类型：文件存储在工作区内的项目文件夹内，组织方式可能因项目类型而异。工作区位置默认位于“<家目录>/workspace”，可通过Eclipse首选项进行更改。要修改项目存储位置，可右键单击项目并选择“属性”中的“资源”选项卡进行修改。

vscode如何创建web项目 Apr 03, 2024 am 03:48 AM

在 Visual Studio Code 中创建 Web 项目的步骤：创建项目文件夹。安装 HTML、CSS 和 JavaScript 扩展。创建 HTML 文件并添加必要代码。创建 CSS 文件并添加样式。使用 http-server 命令运行项目。

Web项目部署在Tomcat上的最佳实践和常见问题解决方案 Dec 29, 2023 am 08:21 AM

Tomcat部署Web项目的最佳实践和常见问题解决方法引言：Tomcat作为一个轻量级的Java应用服务器，在Web应用开发中得到了广泛应用。本文将介绍Tomcat部署Web项目的最佳实践和常见问题解决方法，并提供具体的代码示例，帮助读者更好地理解和应用。一、项目目录结构规划在部署Web项目之前，我们需要规划项目的目录结构。一般来说，我们可以按照以下方式组织

利用Node.js实现数据可视化的Web项目 Nov 08, 2023 pm 03:32 PM

利用Node.js实现数据可视化的Web项目，需要具体代码示例随着大数据时代的到来，数据可视化成为了一种十分重要的数据展示方式。通过将数据转化为图表、图形、地图等形式，能够直观地展示数据的趋势、关联性以及分布情况，帮助人们更好地理解和分析数据。Node.js作为一种高效、灵活的服务器端JavaScript环境，可以很好地实现数据可视化的Web项目。在本文中，

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

eclipse如何创建web项目 Jan 12, 2024 pm 02:51 PM

eclipse创建web项目的步骤：1、安装适当的插件；2、创建动态Web项目；3、输入项目名称；4、选择合适的服务器；5、配置服务器设置；6、创建Web模块；7、配置项目属性；8、完成向导；9、添加必要的文件和文件夹；10、编写代码；11、配置部署描述符；12、构建和运行项目。详细介绍：1、安装适当的插件，在Eclipse中创建Web项目需要安装适当的插件等等。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

深入探索Go语言开源项目的无限潜力：五个项目概要值得留意 Jan 30, 2024 am 10:48 AM

近年来，Go语言在软件开发领域的应用越来越广泛，吸引了众多开发者的关注和参与。Go语言以其高效的性能、简洁的语法和强大的并发特性，成为了许多开发者的首选语言。在Go语言的生态系统中，开源项目扮演着非常重要的角色，为开发者提供了各种优秀的工具和库。本文将概述五个值得关注的Go语言开源项目，以展示Go语言在软件开发领域的无限潜力。GinGin是一个基于Go语言的

See all articles

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

1.前言

3.代码设计

3.1 index.html

3.2 app.js

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题