Use Angular with HTML5

Question

I'm taking tutorial in CodeSchool about angular and I try to create my own experiment in html5 and angular new version in vs2012.

I try to test angular repeat but the problem is HTML5 can't render my angular.

When I try to run my page, the repeater only show the angular statement {{item.name}}:{{item.quantity}} not the result. Why? -"show code below"

Angular script :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

application.js :

<script type="text/javascript" src="Scripts/application.js"></script>

$(function () {
    var app = angular.module('zaskarCorp', []);
    app.controller('kirito', function ($scope) {
        $scope.items = [{
            "name": "dual sword",
            "quantity": 2
        }, {
            "name": "gun",
            "quantity": 1
        }, {
            "name": "laser sword",
            "quantity": 1
        }];
    });
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script type="text/javascript" src="Scripts/application.js"></script>
</head>

<body data-ng-controller="kirito">
  <ul>
    <li data-ng-repeat="item in items">
      <span>{{item.name}}:{{item.quantity}}</span>
    </li>
  </ul>
</body>

</html>

As you can see I add data- in my angular because I use html5. -"I hate warnings"

You've answered your own question. You've added data- to the angular directive thus no longer making it an angular directive. Ask yourself, how do you expect that angular knows what data-ng-controller means? It doesn't, and since the directive is not now being processed your angular expressions are not being evaluated. — rism
– rism, Commented Nov 8, 2014 at 1:58
Are you receiving an error? You have var app = agular.module..., do you mean var app = angular.module...? You also have $(funtion()..., do you mean (function()...? — wjohnsto
– wjohnsto, Commented Nov 8, 2014 at 2:01
@rism, angular normalizes directive names, and data- is accepted specifically for this reason. — New Dev
– New Dev, Commented Nov 8, 2014 at 2:01
@NewDev Yep you're right. docs.angularjs.org/guide/directive — rism
– rism, Commented Nov 8, 2014 at 2:03

New Dev · Accepted Answer · 2014-11-08 02:09:47Z

2

Your code has a number of typos and errors:

funtion instead of function
agular instead of angular
no jQuery included, but you call $(function(){...})

Here's a plunker with your code working.

Also, for future reference, if you remove .min from the angular source, it makes it easier to debug.

edited Nov 8, 2014 at 2:09

answered Nov 8, 2014 at 2:02

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

1 Comment

Onel Sarmiento Over a year ago

The problem is the $ from $(function(){});, I thought Angular is extension of jQuery.

Jacek Zyśk · Accepted Answer · 2014-11-08 02:02:29Z

1

Please add this directive to your body tag: data-ng-app="zaskarCorp"

Also, you have some misspellings in your javascript code.

answered Nov 8, 2014 at 2:02

Jacek Zyśk

1344 bronze badges

2 Comments

Onel Sarmiento Over a year ago

It's not working, sorry there is no misspellings I just miss type when putting it here.

Jacek Zyśk Over a year ago

Maybe you should include jQuery or remove "$(function..." completely? I removed that and it works.

Shalabh Raizada · Accepted Answer · 2016-02-19 06:32:47Z

Without using jQLite your code will look like this:

var app = angular.module('zaskarCorp', []);

app.controller('kirito', function ($scope) {

$scope.items = [
    {
        "name": "dual sword",
        "quantity": 2
    }, 
    {
        "name": "gun",
        "quantity": 1
    }, 
    {
        "name": "laser sword",
        "quantity": 1
    }];
});

Full code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script>
    var app = angular.module('zaskarCorp', []);

    app.controller('kirito', function($scope) {

      $scope.items = [{
        "name": "dual sword",
        "quantity": 2
      }, {
        "name": "gun",
        "quantity": 1
      }, {
        "name": "laser sword",
        "quantity": 1
      }];
    });
  </script>
</head>

<body data-ng-controller="kirito">
  <ul>
    <li data-ng-repeat="item in items">
      <span>{{item.name}}:{{item.quantity}}</span>
    </li>
  </ul>
</body>

</html>

Collectives™ on Stack Overflow

Use Angular with HTML5

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related