0

I'm trying to follow the instructions for the AngularFaces tutorial on their website here: https://angularfaces.com/index.html#/step-01.html

However, upon finishing step 01, my web page looks like this: enter image description here

And it's supposed to look like this: enter image description here

My src/main/webapp/index.xhtml looks like this:

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:prime="http://primefaces.org/ui"
    xmlns:ng="http://angularjs.org" 
    >
    <h:head>
        <title>AngularFaces 2.0 tutorial step 00 - Introducing
            AngularTetris</title>
    </h:head>
    <h:body style="width:1000px" ng-controller="LabelDemoController"
        ng-app="AngularFacesExamples" >

        <h:form id="angular">
            <prime:panel header="Contact Info">
                <prime:panelGrid columns="3">
                    <prime:inputText value="#{customer.lastName}" />
                    <prime:inputText value="#{customer.firstName}" />
                    <prime:inputText value="#{customer.dateOfBirth}" />
                    <prime:inputText value="#{customer.emailAddress}" />
                    <prime:inputText value="#{customer.iAgreeToTheTermsAndConditions}" />
                </prime:panelGrid>
                <prime:commandButton value="save" update="angular"
                    action="#{customer.save}" />


            </prime:panel>
        </h:form>

    </h:body>
</f:view>

My pom.xml file looks like this:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>de.beyondjava.angularFaces</groupId>
<artifactId>angularfaces-tutorial-step-00</artifactId>
<packaging>war</packaging>
<version>2.0.0</version>
<name>angularfaces-2.0-tutorial-step-00</name>
<description>AngularFaces make JSF programming simpler. In particular, it adds AngularJS to JSF.</description>
<url>http://www.beyondjava.net</url>
<licenses>
    <license>
        <name>GNU General Public License (GPL) version 3.0</name>
        <url>http://www.gnu.org/licenses/gpl-3.0.txt</url>
    </license>
</licenses>
<developers>
    <developer>
        <name>Stephan Rauh</name>
        <email>webmaster1@beyondjava.de</email>
        <organization>BeyondJava.net</organization>
        <organizationUrl>http://www.beyondjava.net</organizationUrl>
    </developer>
</developers>
<scm>
    <connection>scm:git:git@github.com:stephanrauh/AngularFaces.git</connection>
    <developerConnection>scm:git:git@github.com:stephanrauh/AngularFaces.git</developerConnection>
    <url>git@github.com:stephanrauh/AngularFaces.git</url>
</scm>
<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.6</maven.compiler.source>
    <maven.compiler.target>1.6</maven.compiler.target>
</properties>
<dependencies>
    <dependency>
        <groupId>de.beyondjava</groupId>
        <artifactId>angularFaces-core</artifactId>
        <version>2.0.0</version>
    </dependency>
</dependencies>
<profiles>
    <profile>
        <id>Mojarra 2.2.7</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <dependencies>
            <dependency>
                <groupId>de.beyondjava</groupId>
                <artifactId>angularFaces-core</artifactId>
                <version>2.0.0</version>
            </dependency>
            <dependency>
                <groupId>com.sun.faces</groupId>
                <artifactId>jsf-api</artifactId>
                <version>2.2.7</version>
                <scope>compile</scope>
            </dependency>
            <dependency>
                <groupId>org.primefaces</groupId>
                <artifactId>primefaces</artifactId>
                <version>6.0</version>
            </dependency>
            <dependency>
                <groupId>com.sun.faces</groupId>
                <artifactId>jsf-impl</artifactId>
                <version>2.2.7</version>
                <scope>compile</scope>
            </dependency>
        </dependencies>
    </profile>
    <profile>
        <id>MyFaces 2.2.4</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <dependencies>
            <dependency>
                <groupId>org.apache.myfaces.core</groupId>
                <artifactId>myfaces-api</artifactId>
                <version>2.2.4</version>
            </dependency>
            <dependency>
                <groupId>org.apache.myfaces.core</groupId>
                <artifactId>myfaces-impl</artifactId>
                <version>2.2.4</version>
            </dependency>
        </dependencies>
    </profile>
</profiles>

<build>
    <plugins>
        <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.4</version>
            <configuration>
                <outputDirectory>dist</outputDirectory>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-source-plugin</artifactId>
            <version>2.2.1</version>
            <executions>
                <execution>
                    <id>attach-sources</id>
                    <goals>
                        <goal>jar-no-fork</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-javadoc-plugin</artifactId>
            <version>2.9.1</version>
            <executions>
                <execution>
                    <id>attach-javadocs</id>
                    <goals>
                        <goal>jar</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-gpg-plugin</artifactId>
            <version>1.5</version>
            <executions>
                <execution>
                    <id>sign-artifacts</id>
                    <phase>verify</phase>
                    <goals>
                        <goal>sign</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

And then I have my Main.js here:

angular.module("AngularFacesExamples", [ "angularfaces" ]);

I feel like I'm at a deadend and am not sure what I need to add or change to initialize AngularJS. I've followed multiple tutorials to initialize AngularJS but obviously I'm not doing something right.

I think something is missing from the tutorial but I'm not sure what. Can someone point me in the right direction?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
David Shinabarger
  • 143
  • 1
  • 3
  • 12
  • Why did you tag this PrimeFaces and not angularfaces? – Kukeltje May 26 '17 at 07:14
  • Hi @Kukeltje - my understanding is that AngularFaces is an implementation of AngularJS into Primefaces. The tag was suggested, and I have since removed the javascript tag and added the barely-ever-used AngularFaces tag. Is there any other way you can help? Thanks for the response. – David Shinabarger May 26 '17 at 15:38
  • It is an implementation of AngularJS into JSF and is sort of based on PrimeFaces. But issues like these are basically not PrimeFaces related. – Kukeltje May 27 '17 at 12:27

0 Answers0