I'm experimenting with using angularjs in a .NET MVC environment. I have placed the usual Razor statement #Scripts.Render("~/bundles/angular") in the head of my _layout.cshtml, and yes it does produce the desired element, as I see when I do a 'View Page Source' on the resultant page. The tag I'm trying to use angularjs on is simply a run-of-the-mill tag. I don't see any errors, and everything else is working fine, but it doesn't appear that the browser is calling the controller before it renders my element.
When does the browser execute the controller code associated with the ng-controller attribute? Does it matter where I place the definition of the controller? I'm simply using the usual angular.module method inside a element to define it, like so:
angular.module('app',[]).controller("FredCtrl",
function($scope){ $scope.message = "- - -"; })
Yet $scope.message seems to be empty. Any suggestions?
Do I need to bundle something else other than just ~/Scripts/angular.js for something so simple?
Thanks for any assistance.
No, the console tab in the Firefox F12 tools doesn't show any errors. Here is the simple h2 element I'm trying to apply angularjs to
<h2 ng-constroller="FredCtrl">Getting started {{message}}</h2>
<script type="text/javascript">
angular.module('app',[]).controller("FredCtrl",
function($scope){ $scope.message = "- - - -"; })
</script>
and yes I do have the ng-app attribute set in my body tag, like so:
<body ng-app="app">
Oh, and I tried it in Chrome as well, with the same result. Everything seems to be working just fine. No errors show up in the Console tab for Chrome as well. I just don't see my $scope.message show up in the display.
Related
I retrieve the code of an HTML page from a server thanks to a rest service and I want integrate the html code into an empty template
.controller('TestController', ['$scope' ,'$rootScope' , '$sce' , function ($scope ,$rootScope,$sce) {
var restHtml =$rootScope.test; //contains <div>Test</div>
$scope.showHtml= $sce.trustAsHtml(restHtml );
}]);
The template
<div ng-bind-html="showHtml"></div> <!-- didn't work and i want a solution without integrate my html code into a existing div -->
Thank you
Ideally DOM manipulations should not happen in the controller, directives should be used for them.
To answer your question, you could compile the html into your tag. Get the html, find the element you want to insert the html in and use compile to do it. A good example of compile.
I am using AngularJS with ThreeJS, trying to make some 3D interactive graphics in my web app.The ThreeJS part successfully shows up and works as expected but AngularJS seems to be not working.
In my index.html, I have:
<html ng-app="plantApp">
<body ng-controller="AppCtrl">
<plant-canvas></plant-canvas>
<div>{{data}}</div>
</body>
</html>
Here plant-canvas is a custom directive and its definition is:
angular.module("plantApp")
.directive("plantCanvas", function() {
return {
restrict: "E",
templateUrl: 'partials/canvas.html',
controller: 'canvasCtrl',
scope: {
data: '='
}
};
});
canvasCtrl is a controller only for canvas manipulation and canvas.html is the partial html file for canvas stuff. I am now trying to display a variable called test and the graphics. So in the partial html file, I have
<div>{{test}}</div>
<div id="container"></div>
Where the container is used by ThreeJS for drawing. In canvasCtrl, I have:
angular.module("plantApp")
.controller("canvasCtrl",function($scope){
$scope.test = "This is a test";
//ThreeJS code for drawing here
});
All the functions for graphics are also in canvasCtrl. When I run the website, I have
{{test}}
showing up, followed by the graphics part. I have no clue how to solve this since the error seems to be generated by three.js but caught by AngularJS as well. Angular does not manipulate graphics directly but the script is written in the controller. If I move "" to index.html and move the graphics part of code to index.html within a script tag, then AngularJS will work fine - "This is a test" will show up. What should I do? Is there a better way to mix ThreeJs with AngularJS?
I think a way to solve this problem is to let angular ignore this error and continues its work, is it possible to do this?
As per the title, when I use templateUrl inside of my $routeProvider, the template and controller do not load.
In my config, I have:
.when('/thing/:thingId', {
templateUrl: 'views/things.html',
controller: 'ThingController'
})
If I change that to
.when('/thing/:thingId', {
template: '<div>Hello you!</div>',
controller: 'ThingController'
})
It works. I'm using AngularJS 1.2.2.
Ideas I've tried:
I've tried adding the template to a script tag which still doesn't work. I get no errors and, since it's on IE, no debug messages. I've got an alert that fires the moment my controller is instantiated. This doesn't happen in IE 7 (and probably 8).
Added html5shiv, json3 shim, angular-ui's ie shiv, and I've created all the common document elements.
I've got the following at the top of my site:
<html class="ng-app:ThingApp" ng-app="ThingApp" id="ng-app" xmlns:ng="http://angularjs.org">
Each idea I've tried works in Chrome and IE10 emulating IE7 (the entire thing works in IE10 emulating IE7, just not real IE7).
I'll try to put up an example to demonstrate the problem but wanted to pose the question first.
EDIT In hindsight I've realized a plunkr example is silly because plunkr doesn't run in IE7 and this code works in things that DO run plunkr. Anyway, I created it so that code can be viewed.
http://plnkr.co/edit/Yswo2QzcwfpzT2PXJV8m
For Angular versions 1.2+, you will need to inject $sce and wrap your resourceUrl with $sce.trustAsResourceUrl('...') for IE7 and below, giving you the following in your directive:
...
templateUrl: $sce.trustAsResourceUrl('/Resource/That/YouTrust.html')
...
reference
you may also need to monkey patch document.querySelector by doing something like the following (if you are using jQuery):
if (!document.querySelector)
{
document.querySelector = function (selector)
{
return $(selector).get(0);
};
}
otherwise angular will blow up here (from Angular source):
var active = !!(document.querySelector('[ng-csp]') ||
document.querySelector('[data-ng-csp]'));
also ensure you are following the Angular IE Compatibility Reference, specifically adding id="ng-app" and not using element directives.
Do all of this and IE7 might work ;)
Edit: fixing the reference URL
It appears that AngularJS from 1.2 onward, does not support IE7. Fixed this issue by switching to AngularJS 1.1.5.
I'm playing around with Coffeescript and AngularJS, trying to use the new "controller as" syntax. Despite varied attempts and searching Google, I can't get it to work - the controller reference in my html doesn't find the Coffeescript class for the controller.
I suspect I am doing something wrong or just misunderstanding things but if anyone has a working example, it would be very helpful.
Here's a little jsfiddle showing what I am trying to do: http://jsfiddle.net/G2r4p/ (the controller in this example is just an empty dummy controller so I can test the syntax).
When I run this example in my browser I get:
Error: [ng:areq] Argument 'AppController' is not a function, got undefined
at hasOwnPropertyFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:60:12)
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1187:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1197:3)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5547:9)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5060:34
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:203:20)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5047:11)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4607:15)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4610:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4516:30)
Thanks
JS Fiddle is the culprit. Your syntax is correct and works fine as is when I tried it in JS Bin. It looks like JS Fiddle is processing something out of order, compared to JS Bin, which doesn't suffer from this issue.
Check out the working JS Bin example: http://jsbin.com/akABEjI/1/edit
You might also be interested in my blog post that takes the AngularJS Todo app and converts it to CoffeeScript: "Writing AngularJS controllers with CoffeeScript classes." Ultimately your sample is similar to what I end up with in my final example.
I have changed a bit your code and it is working now (http://jsfiddle.net/denisonluz/r5KQb/2/)
Also bear in mind that sometimes can be a bit tricky to make AngularJS work when using JSFiddle. There's a good post here about it. When using AngularJS and CoffeScript on JSFiddle you must use manual bootstrap.
COFFESCRIPT
testApp = angular.module 'testApp', []
testApp.controller 'AppController', ($scope) ->
$scope.items = [{title: "My test App", description: 'Some Text Here'}]
angular.bootstrap document, ["testApp"]
HTML
<div ng-controller='AppController'>
<h3>one plus two is {{1 + 2}}</h3>
<ul ng-repeat='item in items'>
<li>{{item.title}}</li>
<li>{{item.description}}</li>
</ul>
</div>
The problem isn't your CoffeeScript, it's JSFiddle.
The problem is that the way JSFiddle is doing CoffeeScript, it's processing the CS and executing the created JavaScript well after Angular tries to bootstrap the app with your ng-app="TestApp" directive.
While #dluz, "solves" this problem, it doesn't explain it.
One solution is to bootstrap your app manually, as #dluz suggests, but you won't have to, and shouldn't have to, do this in a production environment.
Ideally, in a production environment, you'd be pre-processing your CoffeeScript and it would never be compiled to JavaScript in the browser, as it is in JSFiddle.
Here is a simple example with coffeescript, angular and jade working side by side
doctype html
html(lang="en")
head
meta(charset="utf-8")
title Test
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js')
script(src='http://coffeescript.org/extras/coffee-script.js')
style.
input { width: 200px }
script(type='text/coffeescript').
app = angular.module('App', [])
app.controller 'TestController', ($scope)->
$scope.name = 'Angular 1.4 with Jade with coffee'
angular.bootstrap document, ["App"]
body
div
div(ng-controller="TestController")
h2 {{name}}
hr
input(type="text" ng-model="name" )
I am trying to experiment with examples and tutorials at http://docs.angularjs.org/guide/expression and the examples are not working in plunker and jsfiddle. I am getting this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=App&p1=Error%3A%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)
Is this a known error?
JSFiddle in particular has always been difficult to get working with AngularJS. The HTML section isn't meant to take an entire HTML document. Instead, you need to configure the workspace to work with Angular following these steps:
Under external resources, add the Angular script (remember to click the + icon)
Under Fiddle Options change the body tag to include ng-app like so: <body ng-app>
That should get you started. If you don't mind using an older version of Angular (1.1.1), you can select it from the "Frameworks & Extensions" drop down and change the 2nd drop down from onLoad to No wrap - in <body>.
See here for a working example from the docs: http://jsfiddle.net/jPtb3/
And here for the optional approach using 1.1.1: http://jsfiddle.net/5nA2H/
Update
There's some misinformation in the comments.. The docs ARE actually creating angular.module for you, but they're passing in an empty dependency. So you can either remove ="App" (not best), or you fix the angular.module declaration by removing the empty dependency (best) like so:
angular.module('App', []);