hope things are going well.
I'm attempting to setup my development environment to be able to effectively follow the AngularJS tutorials on http://egghead.io/. I've followed the tutorial on http://docs.angularjs.org/tutorial and have since then been playing around with the angular-seed skeleton. I have successfully set up the angular-seed skeleton and am able to fully run it.
When I attempt to create js files with functions, such as the one in video 2. I'm not able to properly bind it to html element on index.html. I believe the issue may be with how routing is implemented in the angular-seed. I have node.js installed and am able to start the web server from the scripts folder in the angular-seed.
I'm really excited to begin working with AngularJS after I had the opportunity to work with ASP.NET MVC 4. I really like the information John provides in the tutorials on egghead.io, but I'm currently unable to fully emulate his instructions. It looks like he is JetBrains WebStorm, but I have no interest in purchasing it, if possible.
Any help would greatly be appreciated.
Thanks!
Edit 1:
For Example. In video 2 on the egghead.io tutorials. He creates a js file called main.js where he put a customer function and refers to it as an angular controller in index.html:
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
Wouldn't a controller need something to exent of:
angualar.module('myApp',[]).controller('FirstCtrl', function(...){});
For angular to have it work as a controller on index.html? I'm able to add some of these functions to controllers.js of the angular-seed and make them work to some extent. Would it best to perhaps still use angular-seed and put the controllers/model/etc he displays some way into it's structure?
I ended up using angular-seed and placing the controllers/services/etc he is creating into controller.js for the first few videos. I was able to successfully output the correct information he is displaying in the videos. By the end of video 5, my code in controllers.js looked something like this:
'use strict';
/* Controllers */
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {message:"I'm data from a service"}
})
myApp.controller('FirstCtrl', function FirstCtrl($scope, Data){
$scope.data = Data;
});
myApp.controller('SecondCtrl', function SecondCtrl($scope, Data){
$scope.data = Data;
$scope.reversedMessage = function (message) {
return message.split("").reverse().join("");
}
});
At first I was using sublime text 2 and command line (node.js expressjs server), but recently I started using Visual Studio and created an empty website. I transferred all the folders/files of angular-seed into the website structure and I longer need to run node.js expressJS from the scripts\web-server.js. VS2013 has angularJS auto-complete features so it makes it easier.
I really like his tutorials and I'm glad I'm now able to successfully follow them to start learning angularJS.
Thanks!
Related
I've spent a few hours on this now and I cannot crack it.
I'm trying to implement a great AngularJS example I found online into my app, while my front end up to now is fully normal JS.
I have installed the pipeline plugin and put the files in the respective folders:
http://i.imgur.com/cAPA6ui.png
AngularJS seems to be loading in correctly and in the right order, however in the dev tools it does say 'compile=false' after the js file name?
See: http://i.imgur.com/qHEWwc9.png
I tried to redirect to the new AngularJS page when I click into one of my current views, I thought that the following code was going to do so:
app.config(['$routeProvider', function($routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/view', {
templateUrl: 'assets/index.html'
})
So is it possible to use both AngularJS and regular JS in my application?
And if so, how do I go about moving from a JS to an AngularJS page?
Any assistance is greatly appreciated.
Just go to url http://localhost:8080/#/view But if you enable html5Mode then to view it simply go to http://localhost:8080/view
I'm learning Angular for a new job (1 at the moment, then we'll be transitioning to 2 later on). I have experience with ASP MVC but none with client side MVC so this is all new to me from the get go. Most tutorials use this file "app.js" or something along these lines, which I guess registers various things with Angular, like the name of your web app, etc. That's all fine, but I want to know what is the specific purpose of this file?
For example, I'm going through this tutorial currently and this is the code we're doing for routing and controllers:
var AngularWebApp = angular.module('AngularWebApp', []);
AngularWebApp.controller
('LandingPageController', LandingPageController);
var configFunction = function ($routeProvider) {
$routeProvider.
when('/routeOne', {
templateUrl: 'routesDemo/one'
})
.when('/routeTwo', {
templateUrl: 'routesDemo/two'
})
.when('/routeThree', {
templateUrl: 'routesDemo/three'
});
}
configFunction.$inject = ['$routeProvider'];
The reason I'm asking is I have yet to read a single explanation anywhere on what this file is actually for, it seems like we're just dumping a bunch of config settings in here, so is this sort of like in ASP MVC the web.config file? I just want a definitive answer rather than just guessing about it.
app.js (I use main.js) is just a common name given to the root bootstrapping file for an angular project. While you may concat all your js files for a production release, when developing, file separation is obviously a good thing.
When developing an angular project, you create a bunch of modules that do various things, but you need a primary module for your app that you use with the ng-app attribute in your html: https://docs.angularjs.org/api/ng/directive/ngApp
This module sets up dependencies, and usually houses app config, such as routing. Although you don't have to structure your app this way, as in the end it is just a naming convention.
Probably there is some mistake from my end in handling the syntax and presentation in Angular.
This code is not working
http://plnkr.co/edit/sR3gqODKoqL6utxsXqQu?p=preview
Same code is working in this way
http://plnkr.co/edit/W3GQZaIu5vPFza7aBOA6?p=preview
Please check the script.js file there in the file where things are working properly the directive and app is all linked to each other an then where it isn't working I tried separating it which I must do in order to accommodate it in a separate view.
you have forgot var app ont top of script.js
var app = angular.module('myApp', ['smart-table']);
I'm building an Adobe AIR application with AngularJS. And have quickly come across a problem in that Angular can't see partials below a certain level and any $http resources.
I've read here: How to Adjust Angular's URL matching pattern that this is because of the way Angular looks at URLs instead of using app:/ but in 2.0+ it no longer has a SERVER_MATCH so I can't use that regex... if that's even the issue anymore?
Basically if I have a index.html like:
<div ng-include="'partials/header.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
It will find those two includes fine! But if in header I have:
<div class="header">
<div ng-include="'partials/header-nav.html'"></div>
</div>
Angular won't see that header-nav in Adobe AIR, because it seems to lose where partials folder is in relation to the rest of the application... I'd assume that all resources also break for this same reason!
This also doesn't work:
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
Even if I was to call this on the index route, it won't find the JSON file as the factory doesn't know where to find the file...
Setting <base href="app:/"> doesn't fix it either but also breaks the links so that's not a solution...
Any ideas? I'm assuming it's something simple...
This sounds more like server issue then angular.
Are you using paths with hashes? If no, try to, maybe bowser is confused by changing the address bar path and relative urls.
Are you using grunt to build the project? It's worth a try, and then you can use grunt-angular-templates to build them into one js file. There really isn't any reason to make multiple requests for html form you production env.
Load your index.html from the web server.
Then all your resources will be loaded relative to that including the angularJS which will load things like templates.
You can use StageWebView as shown below:-
var webView:StageWebView = new StageWebView();
public function StageWebViewExample() {
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( "http://localhost:9000/app/index.html" );
}
Other options are included in my comments to OP's questions but this should serve the solution well in the constraints of the problem defined by OP.
I am using angular file upload in a custom property editor for Umbraco 7.0.3. I am following this tutorial in order to create the editor.
I am quite new to angular, so my question maybe trivial for some of you: I cannot resolve dependency to file upload service in my controller soon enough. My HTML template looks like:
<div ng-controller="MyCustomController">
<input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>
The controller function would need $upload service as an argument, however I inject that service at the beginning of the function:
angular.module("umbraco")
.controller("MyCustomController", function ($scope, assetService, $upload) {
assetsService
.load([
"/App_Plugins/MyCustomPlugin/angular-file-upload.min.js",
])
.then(function () {
alert('upload service loaded');
});
$scope.onFileSelect = function ($files) {
alert('file selected');
}
});
So, it is definitely not right this way. I was trying to load the upload service before the controller initialization, however it loads asynchronously, so the service cannot get defined before the controller anyway.
How can I declare my controller function only after the upload service is loaded, or how can I get a reference to the service other than an argument?
Thanks,
EDIT
The only solution I've found so far was to include the actual file upload codebase into the controller of the custom property editor. I used this paper as a starting point for my own codebase for its simplicity. However I am still looking for the 'proper' way of loading an external module in this case.
Include your code as a service instead.
The code angular.module line can take extra parameters if you see its documentation page. It is here that you should look to include any third party libs. For example, I use ngTable - an AngularJS wrapper around a jQuery sortable and filterable table plugin. To include its usage, I have to add it as a service to the current application's module like so:
var app = angular.module("umbraco", ['ngTable']);
All I then have to remember to do is to reference the scripts, and I can use the code as though I had included the body of the code itself. Therefore, I presume that you would reference your service JS files, and write your code to reference the service like this:
angular.module("umbraco", "MyCustomController");
I would however rename the code as services rather than controllers.
It's a steep learning curve for AngularJS, and even when you've used it a lot, there are a lot of common gotchas. I hope this explains it a bit more.