- app
- src
- js
- libs
- angular.min.js
- app.js -sass
- sass-structure
- libs
- js
- index.html
- src
- gulpfile.js
- package.json
- readme.md
- run
(sudo) npm install - run
gulp - Then go to the browser and paste: "http://localhost:3000/".
In this example I already did the setup. But the most important things to do is:
Before you start, checkout this repo first: How to start an AngularJS app
- Now include the ngRoute script in your html: ngRoute source
- Give your application a name, in the app.js (
var ngRouteApp = angular.module("ngRouteApp", ['ngRoute']);) & html (<html ng-app="ngRouteApp">). Be carfull that the name inside the angular.module("appName") is the same as the name inside the html ng-app. - Add a several html file in the "views" folder. Like home.html, about.html & contact.html.
- In the app.js we need to create a routeProvider, to let the routes show the right content:
ngRouteApp.config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: '../views/home.html' }) .when('/home', { redirectTo: '/' }) .when('/about', { templateUrl: '../views/about.html' }) .when('/contact', { templateUrl: '../views/contact.html' }) .otherwise({ redirectTo: '/' }); }); - Now add
<ng-view></ng-view>to the place where the views content needs to be shown. - Now if you add home after the url, you will go to the root. When adding about, you see the about content.