Permalink
Browse files

A for Angular: adding angular to NodeJS

1 parent cbf5366 commit ebf20f4093aa20c867777b4b3db825429b54a20d @amejiarosario committed Oct 3, 2014
Showing with 76 additions and 3 deletions.
  1. +1 −1 routes/index.js
  2. +75 −2 views/index.ejs
View
@@ -3,7 +3,7 @@ var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
- res.render('index', { title: 'Express' });
+ res.render('index', { title: 'ngTodo App' });
});
module.exports = router;
View
@@ -1,11 +1,84 @@
<!DOCTYPE html>
-<html>
+<html ng-app="app">
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
- <p>Welcome to <%= title %></p>
+
+ <ng-view></ng-view>
+
+ <!-- Libraries -->
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
+
+ <!-- Template -->
+ <script type="text/ng-template" id="/todos.html">
+ Search: <input type="text" ng-model="search.name">
+ <ul>
+ <li ng-repeat="todo in todos | filter: search">
+ <input type="checkbox" ng-model="todo.completed">
+ <a href="#/{{$index}}">{{todo.name}}</a>
+ </li>
+ </ul>
+ </script>
+
+ <script type="text/ng-template" id="/todoDetails.html">
+ <h1>{{ todo.name }}</h1>
+ completed: <input type="checkbox" ng-model="todo.completed">
+ note: <textarea>{{ todo.note }}</textarea>
+ </script>
+
+ <script>
+ angular.module('app', ['ngRoute'])
+
+ //---------------
+ // Services
+ //---------------
+
+ .factory('Todos', function(){
+ return [
+ { name: 'AngularJS Directives', completed: true, note: 'add notes...' },
+ { name: 'Data binding', completed: true, note: 'add notes...' },
+ { name: '$scope', completed: true, note: 'add notes...' },
+ { name: 'Controllers and Modules', completed: true, note: 'add notes...' },
+ { name: 'Templates and routes', completed: true, note: 'add notes...' },
+ { name: 'Filters and Services', completed: false, note: 'add notes...' },
+ { name: 'Get started with Node/ExpressJS', completed: false, note: 'add notes...' },
+ { name: 'Setup MongoDB database', completed: false, note: 'add notes...' },
+ { name: 'Be awesome!', completed: false, note: 'add notes...' },
+ ];
+ })
+
+ //---------------
+ // Controllers
+ //---------------
+
+ .controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) {
+ $scope.todos = Todos;
+ }])
+
+ .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', function ($scope, $routeParams, Todos) {
+ $scope.todo = Todos[$routeParams.id];
+ }])
+
+ //---------------
+ // Routes
+ //---------------
+
+ .config(['$routeProvider', function ($routeProvider) {
+ $routeProvider
+ .when('/', {
+ templateUrl: '/todos.html',
+ controller: 'TodoController'
+ })
+
+ .when('/:id', {
+ templateUrl: '/todoDetails.html',
+ controller: 'TodoDetailCtrl'
+ });
+ }]);
+ </script>
</body>
</html>

1 comment on commit ebf20f4

@sangeetshah

sss

Please sign in to comment.