angularJS 结合nodejs实现单页面开发

最新推荐文章于 2024-04-30 15:34:23 发布

HeSir。

最新推荐文章于 2024-04-30 15:34:23 发布

阅读量3.7k

点赞数

分类专栏： web前端文章标签： angularjs nodejs web

本文链接：https://blog.csdn.net/HeSir_/article/details/50969018

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

main.html

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
    <meta charset="UTF-8">
    <title>BackStage Practice</title>

    <link rel="stylesheet" href="./css/normalize.css"><!--导入normalize 统一浏览器默认样式-->
    <link rel="stylesheet" href="./css/bootstrap.min.css"><!--导入bootstrap-->
    <link rel="stylesheet" href="./css/mainStyle.css">

    <script src="js/angular.min.js"></script><!--导入anjularjs-->
    <script src="js/angular-ui-router.min.js"></script> <!--导入angular的路由器(不是anjular自身的路由)-->
    <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 Header</h1>
    </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 Header</h1>
    <a href="#/index" class="btn btn-primary">Index</a>
    <a href="#/login" class="btn btn-primary">Login</a>
    <a href="#/register" class="btn btn-primary">Register</a>
</header>

HeSir。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS 结合nodejs实现单页面开发

main.htmlhtml>html lang="en" ng-app="mainApp">head> meta charset="UTF-8"> title>BackStage Practicetitle> link rel="stylesheet" href="./css/normalize.css">导入normalize 统一浏览器默认样式-->
复制链接

扫一扫