Angular ui-router 入门

下载JS

<script type="text/javascript" src = libs/angular.min.js>script>
<script type="text/javascript" src = libs/angular-ui-router.min.js>script>
//引入应用的js文件
<script type="text/javascript" src = js/app.js>script>
<script type="text/javascript" src = js/router.js>script>

目录结构

Angular ui-router 入门_第1张图片

首页 index.html


<html>
<head>
    <title>hello angulartitle>
    <link rel="stylesheet" type="text/css" href="css/common.css">
head>
<body>


<div data-ng-app="Module" class="wrap">
    <div ui-view>div> 
div>

<script type="text/javascript" src = libs/angular.min.js>script>
<script type="text/javascript" src = libs/angular-ui-router.min.js>script>

<script type="text/javascript" src = js/app.js>script>
<script type="text/javascript" src = js/router.js>script>

body>
html>

母版文件common.html

<div>
    <h1>this is common pageh1>
        <a ui-sref="common.page1" href="">page1a>
        <a ui-sref="common.page2" href="">page2a>
        <a ui-sref="common.page3" href="">page3a>
    <div>

    <div>
         <div ui-view>div>
     div>
div>

子页面 page1.html

<h2>page 1h2>

其他类似

全局app.js

var myAPP = angular.module("Module",["ui.router"]);

注意此时定义的module名称为Module,他的实例对象叫myAPP。然后把这个Module暴露给data-ng-app

定义路由 Router.js

'use strict';
myAPP.config(['$stateProvider','$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/common");
        $stateProvider
        .state("common", {
            abstract: false,
            url: "common",
            templateUrl: "views/common.html"
        })
        .state("common.page1", {
            url:"/page1",
            templateUrl: "views/page1.html"
        })
        .state("common.page2", {
            url:"/page2",
            templateUrl: "views/page2.html"
        })
        .state("common.page3", {
            url:"/page3",
            templateUrl: "views/page3.html"
        });
    }
]);

注意下:在声明state的时候注意,url的名称要和templateUrl中页面的名称一致。

你可能感兴趣的:(angular)