AngularJS and hard beginnings - simple app doesn't work

Question

I am studying AngularJS and met the problem with my, actually, hello world app. At first I will show the code:

index.html

<!DOCTYPE html>
<html ng-app="nazwa">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href = "#">Add Order</a>
<div>
    <div ng-view></div>
</div>

<script src="scripts/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

var mainModule = angular.module("nazwa", []);

mainModule.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            controller: 'customerController',
            templateUrl: 'partials/View1.html'
        })
        .when('/cos', {
            controller: 'customerController',
            templateUrl: 'partials/View2.html'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);


mainModule.controller('customerController', function ($scope) {
    $scope.customers = [
        {name: 'john', lastname: 'dersky'},
        {name: 'someone', lastname: 'lastname'},
        {name: 'peter', lastname: 'dewski'}
    ];

    $scope.addCust = function () {
        $scope.customers.push(
            {name: $scope.newCust.name, lastname: $scope.newCust.lastname}
        )
    }
});

View1.html

<div class="container">
    <h2>View 1</h2>
    Name:<br/>
    <input type="text" ng-model="filter.name"/><br/>
    <ul>
        <li ng-repeat="cust in customers | filter:filter.name">{{cust}}</li>
    </ul>

    <br/>
    Customer Name:<br/>
    <input type="text" ng-model="newCust.name"/><br/>
    Customer Lastname:<br/>
    <input type="text" ng-model="newCust.lastname"/><br/>
    <button ng-click="addCustomer()">Add</button>
    <br/>
    <a href="#/cos">View 2</a>
</div>

And View2.html is pretty the same, but few changes

And the problem is that when I run index.html nothing shows. Even if I add some {{1+2}} code to index.html, the browser shows raw "{{1+2}}" rather than "3". When I comment whole routing (mainModule.config) then {{1+2}} works fine and shows 3, but index.html still show neither View1 nor View2

What causes the problem? I have searched whole web, for hours and nothing.. what a shame

thanks for you help and dont beat me too hard for my mistakes, I am quite new in Angular :)

edit: I found the console log errors: http://i57.tinypic.com/2e5qgeh.jpg enter image description here

Jesse Carter · Accepted Answer · 2014-12-04 20:50:21Z

3

As dfsq mentioned you are most likely missing ngRoute module. It is available for download here.

Include that in your project before app.js as well as the code changes that dfsq mentioned.

answered Dec 4, 2014 at 20:50

Jesse Carter

21.3k8 gold badges71 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

azalut Over a year ago

thank you so much! it is the answer :) although another problem is that when I press "Add" button to add new customer, then nothing happens, what can be the problem?

Jesse Carter Over a year ago

@azalut you didn't connect your button to the function in your scope. Add ng-click="addCust()" to your Add Order link

azalut Over a year ago

omg such a stupid mistake.. though experience in programming still making such a mistakes :) thank you doubly

Jesse Carter Over a year ago

@azalut No problem! Feel free to mark my answer as correct if you'd like to repay me :P

azalut Over a year ago

here you go ;)I was following the video-tutorial on youtube and the autor didnt have to include any angular-route JS file, strange.. maybe it depends on angularjs version?

|

dfsq · Accepted Answer · 2014-12-04 20:25:53Z

3

You need to add ngRoute module dependency:

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

By the way open a console (F12) and check for errors: there must be one saying that.

answered Dec 4, 2014 at 20:25

dfsq

193k26 gold badges244 silver badges261 bronze badges

5 Comments

azalut Over a year ago

I tried that but still doesn't work, any other ideas? I found the errors in console, pic is upper

dfsq Over a year ago

Are you really posting complete code? Because error states that there something else except ngRoute error.

azalut Over a year ago

yup, the files I posted are ctr+a, ctrl+c, ctrl+v :) I had only changed mainModule name from "nazwa" to "myApp" but now it is changed again to "nazwa" (read the code in my question once more)

Jesse Carter Over a year ago

@azalut Its not enough to just add ['ngRoute'] to your angular module. You need to actually download the js for ngRoute and include that on your page

dfsq Over a year ago

@JesseCarter Damn, totally true! Missed that :) Thank you for valuable note!

Collectives™ on Stack Overflow

AngularJS and hard beginnings - simple app doesn't work

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related