4

This is probably the most basic question. How do i get started with AngularJS in Salesforce.

I need to build a SPA using angularJS. I can learn angularJS, there are plenty of tutorials.

But how do i even get started. Like, i need to start from scratch, what do i even install on my laptop and get started?

For example, if someone asked similar question about where does he get started with apex code, we would probably advise him to install eclipse with force.com plugin, pull data from org, etc, etc.

Can someone please provide similar answer to my question about AngularJS with salesforce. I see plenty of tutorials which give the code. But thats not what i am looking for. Where do i put that code in my local machine, how do i push it into org.

Basically - how and where do i start the development process? Is there some framework i need to install on my machine? Are there any static resources i will have to put in my org? I need starting steps.

Improve this question
3

3 Answers 3

Reset to default
5

You don't need to install any software on your computer. Simply download the AngularJS minified file, upload as a new static resource in your developer org, then start creating new pages. You can go to "Your Name" > Developer Console, create a new Visualforce page, and start making your new apps. Your first page might look like this:

<apex:page>
    <apex:includeScript value="{!URLFOR($Resource.angularJS)}" />
    <div ng-app="myAngularDemo">
        <div ng-controller="myFirstController">
        {{a}} + {{b}} = {{ a+b }}
        </div>
    </div>
    <script>
    angular.module("myAngularDemo", [])
        .controller("myFirstController", ["$scope", function($scope) {
        // Do stuff here
        $scope.a = 1;
        $scope.b = 2;
        }]);
    </script>
</apex:page>

That's pretty much it. Of course, you'll need to learn about templates, repeaters, modules, and so on. Lots of reading coming up. However, it's pretty much as straight-forward as you can get on getting started.

Edit: Eventually, your code will also likely be in a static resource, too. The Developer Console allows you to edit JS static resources directly in the UI.

Improve this answer
0

I'm looking for something even simpler. Is it possible to just get the W3Schools first page to work in VF?

I've tried the page below, and what I see is Hello {{name}}. When I try it just using my personal web server it functions just as W3Schools says it should.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false">

<html>
<head>
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

    <div ng-app="">

    <p>Input something in the input box:</p>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here" /></p>
    <h1>Hello {{name}}</h1>

    </div>

</body>
</html>

</apex:page>
Improve this answer
0

You are not setting the ng-app to any value. As given in example above the value is set to myAngularDemo which is included in Script tag in the bottom. I hope that helps.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .