AngularJS Tutorial: A Quick Example Using Ng-view, NgRoute ...

Trang chủ » Ng-view » AngularJS Tutorial: A Quick Example Using Ng-view, NgRoute ...

Có thể bạn quan tâm

A quick example using ng-view, ngRoute, routeProvider, and templateUrl

AngularJS logo Bookmark and Share bogotobogo.com site search: ng-vew and ngRoute

In this example, we'll have two views.

First, view index.html and with home.html inserted. Then, when we click "View galaxies", we get another view which listing all galaxies.

Both cases, the new view (when we switch them) will be placed within ng-view directive.

So, here is our default file: index.html:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>ngRoute / ng-view sample</title> </head> <body> <div ng-app="mainApp"> <h2>Welcome to Bogo Planetarium!</h2> <p><b>Header</b> <br /> This message will stay throughout all pages. <br /> Replaceable view will be within ng-view directive. <br /> ================== ng-view starts ==================</p> <br> <div ng-view></div> <br> <p>=============== ng-view ends ==================</p> <p><b>Footer</b></p> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>

As we can see from the index.html, we need javascript file main.js which defines controllers and routes:

var app = angular.module("mainApp", ['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'homeController' }) .when('/viewGalaxies', { templateUrl: 'viewGalaxies.html', controller: 'viewGalaxiesController' }) .otherwise({ redirectTo: '/home' }); }); app.controller('homeController', function($scope) { $scope.message = "$scope.message : from homeController"; }); app.controller('viewGalaxiesController', function($scope) { $scope.galaxies = [ {'name': 'Milkyway', 'distance':'27,000 Light years'}, {'name': 'Andromeda', 'distance':'2,560,000 Light years'}, {'name': 'Sagittarius Dwarf', 'distance':'3.400,000 Light years'} ]; $scope.add = function() { d = {} d['name'] = $scope.name; d['distance'] = $scope.distance; $scope.message = $scope.name + " " + $scope.distance $scope.galaxies.push(d); $scope.name = ""; $scope.distance = ""; $scope.message = $scope.galaxies; }; });

When we first run the app, the index.html requires home.html by the routes defined in main.js. So, here is our home.html:

<div class="container"> <h3> Home page (home.html) </h3> <p>{{message}}</p> <a href="#/viewGalaxies"> View Galaxies List</a> </div>

Finally, our 2nd view is needed when we request /viewGalaxies. The file is viewGalaxies.html and it looks like this:

<div class="container"> <h2> View Galaxies </h2> - viewGalaxies.html <ul> <li ng-repeat="galaxy in galaxies | filter:name">{{galaxy.name}} , {{galaxy.distance}} <br> <img src="{{galaxy.name}}.png" alt="{{galaxy.name}}" height="200" width="200"> <br> </li> </ul> <br /> <p>Add a new galaxy in the input box:</p> <form ng-submit="add()"> Name: <input type="text" ng-model="name" placeholder="Enter name here"> <br> Distance: <input type="text" ng-model="distance" placeholder="Enter distance here"> <br> A new galaxy: {{name}} {{distance}} <br> <input type="submit" value="Add"/> </form> <br /> <a href="#/home">Back to Home</a> </div> AngularJS
  • Introduction
  • Directives I - ng-app, ng-model, and ng-bind
  • Directives II - ng-show, ng-hide, and ng-disabled
  • Directives III - ng-click with toggle()
  • Expressions - numbers, strings, and arrays
  • Binding - ng-app, ng-model, and ng-bind
  • Controllers - global controllers, controller method, and external controllers
  • Data Binding and Controllers (Todo App)
  • Todo App with Node
  • $scope - A glue between javascript (controllers) and HTML (the view)
  • Tables and css
  • Dependency Injection - http:fetch json & minification
  • Filters - lower/uppercase, currenty, orderBy, and filter:query with http.get()
  • $http - XMLHttpRequest and json file
  • Module - module file and controller file
  • Forms
  • Routes I - introduction
  • Routes II - separate url template files
  • Routes III - extracting and using parameters from routes
  • Routes IV - navigation between views using links
  • Routes V - details page
  • AngularJS template using ng-view directive : multiple views
  • Nested and multi-views using UI-router, ngRoute vs UI-router
  • Creating a new service using factory
  • Querying into a service using find()
  • angular-seed - the seed for AngularJS apps
  • Token (JSON Web Token - JWT) based auth backend with NodeJS
  • Token (JSON Web Token - JWT) based auth frontend with AngularJS
  • Twitter Bootstrap
  • Online resources - List of samples using AngularJS (Already launched sites and projects)
  • Meteor Angular App with MongoDB (Part I)
  • Meteor Angular App with MongoDB (Part II - Angular talks with MongoDB)
  • Meteor Angular App with MongoDB (Part III - Facebook / Twitter / Google logins)
  • AngularJS Tutorial: Shopping cart sample
  • Laravel 5 / Angular Auth using JSON Web Token (JWT) - Prod
  • Scala/Java Play app with Angular

    • Từ khóa » Ng-view