Skip to content

Angular Checklist

Jump to bottom Edit New page
tdkehoe edited this page Aug 24, 2015 · 14 revisions

Directories and files:

> js
>> app.js
>> controllers.js
>> routes.js
> partials
>> home.html
index.html
style.css
.gitignore

In index.html:

<html lang="en" ng-app="myApp">
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"> </script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div ng-view></div>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/routes.js"></script>
  </body>
</html>

The order of scripts is important. app.js first, then controllers.js, then the rest.

app.js has

var app = angular.module("myApp", ['ngRoute', 'ngCoDependency']);

controllers.js has:

app.controller('HomeController', function($scope){
    $scope.message = "Connected!";
});

routes.js has:

app.config(function($routeProvider) {
    $routeProvider
      .when('/', { 
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
      })
      .otherwise({
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
      })
});

home.html can have:

<p>Home page</p>

{{message}}

git init

To start the server:

http-server -c-1 -o

A browser window should open to

http://127.0.0.1:8080/

nnnnnnnnnnnnnnn##

Add a custom sidebar
Clone this wiki locally