i tried to build a small prototype Webserver (NodeJS/Jade) to learn AngularJS. Until now i only coded with NodeJS/Javascript/JQuery. I made these following blocks: The short expression {{ 843 / 42 }} is calculated correctly only when ng-app='' (without a specific name). When i use ng-app='myApp' the expression is outputed directly without calculcation. The two text boxes are not filled in with John Doe in botuh cases. Can anyone help me or give me an advise.
layout.jade
doctype html
html(ng-app='')
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/javascripts/angular/angular.js', type='text/javascript')
script(src='/javascripts/angular/angular-resource.js', type='text/javascript')
script(src='/javascripts/jquery-2.1.4.min.js', type='text/javascript')
script(src='/javascripts/index.js', type='text/javascript')
block scripts
body
block content
index.jade
extends layout
block content
h1= title
p Welcome to #{title}
div
table
tr
td
| {{ 843 / 42 }}
td
tr
td First Name:
td
input(type='text', ng-model='firstName')
tr
td Last Name:
td
input(type='text', ng-model='lastName')
tr
td Full Name:
td
| {{firstName + lastName}}
block scripts
| <script type='text/javascript'>
| $(document).ready(function() {
| Index_Load();
| });
| </script>
Index_Load:
function Index_Load()
{
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
}
The module myApp is only initialized on document ready which is not what angular expects. Instead of defining your module and controller in a function and calling it on document ready, use this
This will make sure your module is defined and is available to angularjs