HeSir。
HeSir。

angularJS 结合nodejs实现单页面开发

main.html 
html>
<html lang="en" ng-app="mainApp">
<head>
    <meta charset="UTF-8">
    <title>BackStage Practicetitle>

    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/mainStyle.css">

    <script src="js/angular.min.js">script>
    <script src="js/angular-ui-router.min.js">script> 
    <script src="js/jquery-1.11.3.min.js">script>
    <script src="js/main.js">script>
    <script src="module/index/indexJS.js">script>
head>
<body ng-controller="mainController">

    <header class="col-md-12">
        <h1>This is a Headerh1>
    header>






    <div ui-view>div>

此处是系统的主体架构
ng-app="mainApp" 是定义整个系统的主模块
导入需要用到的文件
ng-controller = "mainController"定义了main.htm的控制器
ui-view 是容纳 跳转页面的区域 这里必须要在引入angular的路由文件(这里用的不是angular自身的路由) <script src="js/angular-ui-router.min.js">script> 
main.js 
var mainApp = angular.module("mainApp",["ui.router","indexApp"]);
mainApp.config(function($stateProvider,$urlRouterProvider) {
    $urlRouterProvider.when("", "/index");
    $stateProvider.state("index", {
        url: "/index",
        templateUrl: "/module/index/index.html",
        controller: "IndexController"
    });


});


//main 的控制器
mainApp.controller("mainController",function($rootScope,$scope){

});


下面是子页面的配置
index.html 
<div ng-controller="IndexController">
    This is a index Page
div>

indexJS.js 
var indexApp = angular.module("indexApp",[]);
indexApp.controller("IndexController",function($scope,$http){
    console.log("Successfully enter the indexAPP----------------------------IndexApp");
    
});

页面跳转的时候  注意路径 href="#/index"
 
   
 
   
<header class="col-md-12">
    <h1>This is a Headerh1>
    <a href="#/index" class="btn btn-primary">Indexa>
    <a href="#/login" class="btn btn-primary">Logina>
    <a href="#/register" class="btn btn-primary">Registera>
header>
 
  
 
 
 


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(web前端)