I recently started with angular.
Do I always have to be connected to the internet to run tutorial scripts too?(bcoz I'm running offline)
I downloaded the angular.min.is file from the angular website and saved it on my system.
Included this path in the HTML script as <script src="C:/.../..../../angular.min.js"></script>
But this did not work because when I run the html script , I get only the html output which means angular.min.js is not detected by the html.
Double checked the path for typos, etc. All good.
What else do I need to install to get this working?
Use this. Change the '...' with the actual folder names.
<script src="file:///C:/.../..../../angular.min.js"></script>
E.g:
<script src="file:///C:/folder1/folder2/folder3/angular.min.js"></script>
Related
My pagination is working good but the problem is the script automatically getting deleted from index.html page, What may be causing it to delete?
you have to add the script tag associated to this pagination Utility into your index.html file by using a cdn kind of way
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js"></script>
or by specifying the local path of this plugin inside your project directory like
<script src="bower_components/angularUtils-pagination/dirPagination.js"></script>
(where bower_components/angularUtils-pagination/dirPagination.js being my path to this utility file inside my project directory)
I am trying to run an ExtJs application without using SenchaCmd. These are the scripts I load in the index HTML file:
<script type="text/javascript" language="javascript" src="dev/ext-all-debug.js"></script>
<script type="text/javascript" language="javascript" src="dev/all.js"></script>
The all.js file contains all the views, controllers, stores and models concatenated into one file using a gulp task (including app.js and Application.js files). The problem is that after these 2 files are loaded, The Ext Loader is still trying to load the required Controllers/Views one by one.
I tried adding the following code into the Application.js file but nothing changed:
constructor: function() {
this.callParent(arguments);
Ext.Loader.setConfig({enabled:false});
},
Any ideas? Why is the Ext.loader trying to load all the requires if they are included in the all.js file? Thanks.
What version of Ext JS? If you're using 5.0.1 the "ext-all-debug.js" file in the root of the ext directory will not work - you want the one in the "build" directory...
I think I know why the Ext.Loader didn't work as expected...
The concatenated files need to be in the right order because on each Ext.define the loader is searching for the dependencies specified in the requires section and if the dependencies are not loaded it will try to load them.
It works recursively until the dependency tree is loaded.
There is a Grunt plugin doing this: https://www.npmjs.com/package/grunt-sencha-dependencies
However I am still not satisfied of the development workflow with ExtJs because when using "app watch", in dev mode, you could be loading hundreds of JS files on a page refresh if your app is big enough and this impacts the performance quite a bit.
I've just downloaded a fresh copy of angular.min.js, and I'm getting a 404 on angular.min.js.map, which I'm not including in my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
The error in Chrome:
GET http://angular.dev/js/angular.min.js.map 404 (Not Found)
Open the angular.min.js file in a text editor. There will be a comment at the end like this:
//# sourceMappingURL=angular.min.js.map
Delete that and the error will disappear.
A map file facilitates regenerating the minified version of a script based on changes to a non-minified version. Since you won't be making changes to angular.js, you don't need the map.
I read somewhere source map files basically turn minified code into its un-minified version for debugging purpose.
You can get rid of this error {angular.min.js.map 404 (Not Found)}
message by following anyone below :-
First way
1.You just have to find the same .map file for angular.min.js which you have included.
(eg. For angularJs minified version 1.5.6 .map files can be downloaded from Here )
Just copy-paste them to the same directory where you have uploaded your minified js files and it'll stop complaining.
The reason they get fetched is the below line which you can find when you open the angular.min.js file.
//# sourceMappingURL=angular.min.js.map
which can be found at the end of the angular.min.js file.
Second way
If you don't want to add the .map files to your project.
You can remove above line and it'll stop fetch attempt, but if you plan on debugging it's always good to keep the source maps linked.
Good day. Sorry but I've stumbled upon a problem that I can't seem to figure out for the past couple of hours. I downloaded this printing class to be able to print a Form that I have in my web application. I copied the Ext.ux.Printer folder in my scripts folder inside resources. The file path looks like: resources/scripts/Ext.ux.Printer and the resources folder is on the same level as the app folder.
My Loader looks like:
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.Printer': 'resources/scripts/Ext.ux.Printer/Printer'
}
});
And the Application looks like:
Ext.application({
requires: [
'Ext.Loader',
'Ext.layout.container.Absolute',
'resources.scripts.Notification',
'Ext.layout.container.Column',
'Ext.ux.Printer.Printer'
], //models, views, controllers, follow after
and I try to use it in my code as such:
Ext.ux.Printer.print(form);
However, I am given an Uncaught TypeError: Cannot read property 'Printer' of undefined whenever I try to execute the line of code above.
Can anyone help me? I'm a beginner in ExtJS4 and I'm just trying to follow examples I see around the internet - it is possible that I tried to appropriate my code incorrectly with something I saw online.
Any help is very much appreciated, thank you.
UPDATE 1
Upon discussion with Guilherme Lopes below we did the following steps:
Import the js files by adding it as a js resource in Sencha Architect. Make sure that the file path is correct.
Check the includeAfterAppJS checkbox. Due to a bug in Architect, sometimes the JS Files are added in before the ExtJS.
Open index.htmluse ext-all.js instead of ext-dev.js. Note that Sencha Architect overwrites/resets this file every time you save your project. A quick fix is to go to project settings and uncheck updating index.html.
Try Ext.ux.Print.print(form);
By the developer instructions, you should import the script files using your main html document, the same way you do with ExtJS classes (if you are not using the bootstrap).
These lines should be added after you import the ExtJS library:
<script type="text/javascript" src="Printer.js"></script>
<script type="text/javascript" src="renderers/Base.js"></script>
The library currently comes with renderers for Ext.grid.GridPanel, and Ext.tree.ColumnTree.
These can be included as required:
<script type="text/javascript" src="renderers/GridPanel.js"></script>
<script type="text/javascript" src="renderers/ColumnTree.js"></script>
And your calls to Ext.ux.Printer should start working.
If you are using Architect, add your external JS files clicking on: + => Resources => JS Resource
And then change the URL to the path you need (do this for every file you wish to add)
* I would just uncheck the x-compile and x-bootstrap
So I am trying to emulate the example "Hello !" given on the Angular website here: http://angularjs.org/ under the section The Basics.
I have placed the following file in my my-user-name directory which contains the angular.js directory that is installed when you clone the Angular repo as per the site's instructions.
<!doctype html>
<html ng-app>
<head>
<script src='js/angular-1.0.0rc6.js'></script>
</head>
<body>
<input type="text" ng-nmodel="name">
<h2>Hello {{name}}!</h2>
</body>
</html>
I am running the angular server via grunt webserverwhich I run from my home directory path and access the above html file by typing http://localhost:8000/angular.html But I get a blank page. I realize that the path js/angular-1.0.0rc6.js doesn't mean anything in the context of my home directory in that there is no js directory in my home dir and similarly no angular-1.0.0rc6.js lying anywhere around those environs. I just copied that path-name from the example. What is the standard protocol in terms of where the script files are located relative to where you develop your angular apps?
Thank you!
There's so many possibilities that I'd nudge you in a slightly different direction to get started. Check out Yeoman (http://yeoman.io).
Yeoman is a nice way to learn because, after running it (which just takes typing 'yo angular' on the command line once Yeoman is installed), it gets you started with a small working app that you can experiment with and it scaffolds up a nice overall base (code/test scaffold, tools, ...) to build from. And it even uses grunt, as you did, to launch your app (you'll just type grunt server and your app should appear in a browser (with live reload working - which is a cool time saver).
Yeoman should save you from having to figure out the kinds of things you are now- is my file in the right location? is my server pointing to the right place? etc... All taken care of by yeoman.
Here's a tutorial showing how to install Yeoman and install Angular: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
You'll see it's only a handful of commands.
In case you'd like to dive in more, here's a talk posted by the Angular team about using Yeoman with Angular: http://www.youtube.com/watch?v=XOmwZopzcTA