国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[AngularJS]使用Yeoman構建開發AngularJS項目

amuqiao / 3185人閱讀

摘要:一般前端項目安裝依賴使用。包括,,以及程序主入口文件。然后頁面顯示正常。這樣就實現了使用構建一個項目,并簡單開發了一下,創建一個新的頁面并實現了路由跳轉。

一. 安裝 第一步:安裝npm所需模塊

首先需要安裝Node.js,然后使用npm安裝所需要的模塊

npm install -g grunt-cli bower yo generator-karma generator-angular
第二步:創建工程

創建一個新的目錄,并在目錄下面運行

yo angular angular-project

angular-project是工程名字
然后會出現如下圖:

根據需要選擇使用Grunt還是Gulp,和是否需要Sass和Bootstrap。這里選擇了使用Grunt和Bootstrap。
Grunt和Gulp都是項目構建工具,不同的是Grunt是基于配置的,而Gulp是基于代碼的。
然后就是安裝過程,生成整個項目的框架,非常方便。

第三步:運行

運行工程,Yeoman已經使用Grunt配置好了整個項目,只需要在控制臺輸入

grunt serve

瀏覽器就會自動打開窗口,http://localhost:9000,然后就可以看到網頁了。

二. 工程目錄

主要開發就在app目錄下面,bower_components是安裝的依賴包,類似Node.js的node_modules,不同的是Node.js使用npm安裝,bower_components使用bower安裝。一般前端項目安裝依賴使用bower。使用npm安裝依賴包時,一個依賴可以有多個版本,而使用bower安裝時,同一個依賴不能有多個版本。使用bower安裝的依賴包可以在bower.json中看到。
Gruntfile.js是編譯工程的文件,這里有很多配置,包括server的配置等,所以這里沒有另外搭建后端server。
package.json是后端的依賴包,主要有Grunt的依賴包。

然后主要的開發就在app文件夾下,這里依次說明。
app/images:存儲網頁需要的圖片。
app/scripts:前端腳本。包括controllers,services,以及程序主入口app.js文件。
app/styles:CSS樣式文件。
app/views:靜態頁面文件。
app/404.html:頁面找不到時跳轉的頁面。
app/favicon.ico:頁面標題前的圖標。
app/index.html:在這里導入CSS樣式文件和所有腳本文件。

三. 創建一個頁面并配置路由

使用Yeoman可以很快的創建頁面對應的controller和路由。

1.安裝angular-ui-router

angular-ui-router是AngularJS的第三方路由模塊,比自帶的angular-route路由模塊好用,可以更好的實現頁面跳轉,嵌套路由。
安裝方法:

bower install angular-ui-router --save
2.配置app/scripts/app.js文件

本來是這樣的

angular
  .module("angularProjectApp", [
    "ngAnimate",
    "ngCookies",
    "ngResource",
    "ngRoute",
    "ngSanitize",
    "ngTouch"
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when("/", {
        templateUrl: "views/main.html",
        controller: "MainCtrl",
        controllerAs: "main"
      })
      .when("/about", {
        templateUrl: "views/about.html",
        controller: "AboutCtrl",
        controllerAs: "about"
      })
      .otherwise({
        redirectTo: "/"
      });
  });

將"ngRoute"改為"ui.router",配置路由的格式也修改為

angular
  .module("angularProjectApp", [
    "ngAnimate",
    "ngCookies",
    "ngResource",
    "ui.router",
    "ngSanitize",
    "ngTouch"
  ])
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state("main", {
        url: "/",
        templateUrl: "/views/main.html",
        controller: "MainCtrl"
      })
      .state("about", {
        url: "/about",
        templateUrl: "/views/about.html",
        controller: "AboutCtrl"
      }};
  }]);
3.創建一個新的頁面
yo angular:route Page

可以看到app/scripts/controllers文件夾下多個一個page.js文件,
app/views文件夾下多了一個page.html文件,
app/index.html中增加了一行

index.html需要導入所有腳本文件,Yeoman幫我們自動導入了。

Yeoman還提供了很多自動創建的方法,
yo angular:controller [name], 自動創建一個controller
yo angular:directive [name],自動創建directive,directive可以自定義指令
yo angular:service [name],自動創建一個service,一般在service中向服務器端發送請求獲取數據
yo angular:filter [name],自動創建filter,filter實現對數據顯示的格式設置
yo angular:view [name],自動創建view

4.配置路由

修改app/scripts/app.js文件

$stateProvider
  .state("main", {
    url: "/",
    templateUrl: "/views/main.html",
    controller: "MainCtrl"
  })
  .state("about", {
    url: "/about",
    templateUrl: "/views/about.html",
    controller: "AboutCtrl"
  })
  .state("page", { //此處為頁面名字,可以自定義頁面名字,在路由跳轉時使用
    url: "page",   //自定義路由
    templateUrl: "/view/page.html",
    controller: "PageCtrl"
  });
5.設置路由跳轉

在首頁上創建一個按鈕,跳轉到創建的page.html

然后在main.js中添加對應的按鈕事件

angular.module("angularProjectApp")
  .controller("MainCtrl", ["$scope", "$state", function ($scope, $state) {
    this.awesomeThings = [
      "HTML5 Boilerplate",
      "AngularJS",
      "Karma"
    ];

    $scope.goPage = function () {
      $state.go("page");
    }
  }]);

首先通過依賴注入的方式注入兩個參數,$scope和$state。
$scope其實是一個對象,存儲當前頁面的數據和函數,可以看作是controller和view之前的橋梁。
$state的作用實現路由跳轉,通過$state.go("page")的形式就可以跳轉到page頁面。
"page"就是下面代碼第一行的頁面名字。

.state("page", {
    url: "/page", 
    templateUrl: "/view/page.html",
    controller: "PageCtrl"
  });

在命令行運行

grunt serve

發現此時頁面成了這個樣子

查看控制臺也并沒有報錯,但是main.html的內容并沒有出現,檢查發現需要修改index.html,

這是angular-ui-router模塊和angular-route的不同之處。
然后頁面顯示正常。

點擊Go Page,也可以在瀏覽器地址欄直接輸入"http://localhost:9000/#!/page"

頁面跳轉到page頁面。

這樣就實現了使用Yeoman構建一個AngularJS項目,并簡單開發了一下,創建一個新的頁面并實現了路由跳轉。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94217.html

相關文章

  • 做一個合格的前端,gulp資源大集合

    摘要:承接前一篇做一個合格的前端,自動化構建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網開發過程中的前后端技術,如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個合格的前端,gulp自動化構建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網:http://www.guandn.com (觀點網是一個獵獲新奇、收獲知識、重在獨立思考...

    Baoyuan 評論0 收藏0
  • 你的第一個AngularJS應用--教程二:基架、建立和測試的工具

    摘要:包括腳手架依賴管理準備測試包括單元測試和端到端測試。我們用來開發的工具有。是一個工具集,包含個核心組件,,和腳手架工具。當你正在做自己的一個項目時,使用哪些模塊將取決于你自己。這個目錄當然是測試文件。 介紹 有很多可用的工具可以幫助你開發AngularJS 應用,那些非常復雜的框架不在我的討論范圍之中,這也是我開始這系列教程的原因。 在第一部分,我們掌握了AngularJS框架的基本...

    k00baa 評論0 收藏0
  • 前端面試題(3)現代技術

    摘要:什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面,后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時,將導航頁傳輸到客戶端,其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。 什么是單頁面應用(SPA)? 單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續請求都無需再離開此頁 目標:旨在用為用戶提供了更接近本地...

    EasonTyler 評論0 收藏0
  • 前端面試題(3)現代技術

    摘要:什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面,后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時,將導航頁傳輸到客戶端,其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。 什么是單頁面應用(SPA)? 單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續請求都無需再離開此頁 目標:旨在用為用戶提供了更接近本地...

    trigkit4 評論0 收藏0

發表評論

0條評論

amuqiao

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<